Electronic clock with CSS and JQuery

HTML & CSS
1

Prepare the HTML
You first declare the jQuery library:
Code:

< script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" > </script>

Then compose the HTML snippet:
Code:

< p id = "txthour" > # </p>: < p id = "txtmin" > # </p>: < p id = "txtsec" > # </p>
< div id = "container" >
< div id = "sec" > </div>
< div id = "min" > </div>
< div id = "hour" > </div>
</div>
< script type = "text/javascript" >
clock ();
</script>

To the CSS section
Your format for the “kim” hours, minutes, seconds, frames containing:
Code:

div {
height: 10px;
width: 200px;
}

#min {
background: red;
}

#sec {
background: blue;
}

#hour {
background: silver;
}

#container {
width: 300px;
height: 30px;
border: 1px solid green;
}

p {
display: inline;
}

Finally the JavaScript-jQuery:
Code:

function clock () {
var d = new Date ();
var s = d. getSeconds ();
var m = d. getMinutes ();
var h = d. getHours ();
$ ("#sec") .CSS ("width", s * 300/60 + "px");
$ ("#min") .CSS ("width", m * 300/60 + "px");
$ ("#hour") .CSS ("width", h * 300/24 + "px");
$ ("#txthour") .html (h);
$ ("#txtmin") .html (m);
$ ("#txtsec") .html (s);

setTimeout ("clock ()", 1000);
}

We split according to maximum rate of 60 minutes at the time, 12/24 kim, 60 seconds are the same length.
Use the setTimeout function to call main recursively on function and assign the length for the needle.

3

Hello @icecreamkb01

Welcome to the forums. I have for the moment unlisted your topic as I cannot see that there is a question.

As these are discussion forums this is more suited to a personal blog than the forums, unless you’re asking for help in getting the script to work - I’ve not tried it so I don’t know if it is working - or if you have a question.

1 Like
4

It’s not working :slight_smile:

Mainly because of the spaces after the brackets and id’s and the use of capitals in the JS (CSS should be css).


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
div {
	height: 10px;
	width: 200px;
}
#min {
	background: red;
}
#sec {
	background: blue;
}
#hour {
	background: silver;
}
#container {
	width: 300px;
	height: 30px;
	border: 1px solid green;
}
p{margin:0 0 .5em}

</style>
</head>

<body>
<p><span id="txthour"> # </span> : <span id="txtmin"> # </span> : <span id="txtsec"> # </span></p>
<div id="container" >
  <div id="sec"> </div>
  <div id="min"> </div>
  <div id="hour"> </div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script type="text/javascript" >
clock (); 
function clock () {
var d = new Date ();
var s = d. getSeconds ();
var m = d. getMinutes ();
var h = d. getHours ();
$("#sec").css("width", s * 300/60 + "px");
$("#min").css("width", m * 300/60 + "px");
$("#hour").css("width", h * 300/24 + "px");
$("#txthour").html(h);
$("#txtmin").html(m);
$("#txtsec").html(s);

setTimeout ("clock ()", 1000);
}
</script>
</body>
</html>
2 Likes
6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.