Tiger Bird Webdesign: What Time Is It?

Friday, 21 November 2014

What Time Is It?

Pink & Black Clock With jQuery

Here, I've created a clock with JavaScript.
First of all, the clock should start working the page has been loaded so we use the onload event. We call the function "clock()".

HTML

To connect the event with the function you have to write onload="clock()" in the body element of the HTML code. The onload event is only valid in the body element. For example, if you put onload in the button element it will do nothing.

JavaScript

We want to get the hours, minutes and seconds so we use the following methods: getHours(), getMinutes() and getSeconds(). The Date() object makes it possible that the actual time is shown. The last line of the code put the hours, minutes and seconds with + together. You have to put something between the variables to make sure everything is displayed; this time I've put colons in between.

HTML Code

<!DOCTYPE html>

<html>
<head>
<Link rel="stylesheet" type="text/css" href="clock.css">

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
<script src="clock.js" type="text/javascript" language="Javascript"></script>
<title>Clock</title>
</head>



<body onload="clock()">

<div id="outside">
<div id="inside">
<div id="chronograph" >

</div>
</div>
</div>

</body>

</html>

CSS Code

#outside
{position:relative;
width:110px;
height:110px;
background-color:#FF0066;
border-radius:50%;
background:linear-gradient(90deg,#FF99CC,#FF0066);
}

#inside
{position:absolute;
width:100px;
height:100px;
top:5px;
left:5px;
background-color:black;
border-radius:50%;
}



#chronograph
{
position:absolute;
width:60px;
height:60px;
top:40px;
left:18px;
border-radius:50%;
background-color:black;
color:#FF99CC;
text-align:center;
font-size:120%;
text-shadow:
1px 1px 10px #FF0066;
-1px -1px 10px #FF0066;
}

JavaScript Code

function clock() {
 var d = new Date();
 var s = d.getSeconds();
 var m = d.getMinutes();
 var h = d.getHours();
 setTimeout(clock,1000);
 document.getElementById("chronograph").innerHTML =  h + ":" + m + ":" + s;

Tiger Bird Webdesign