Member Avatar for Agent Cosmic 
clock();
function clock(){
	var d=new Date();
	var hour = d.getHours();
	var minute = d.getMinutes();
	
	$('#hr1').css('text-indent', '-'+hour.charAt(hour.length-2)*50+'px');
	$('#hr2').css('text-indent', '-'+hour.charAt(hour.length-1)*50+'px');
	$('#min1').css('text-indent', '-'+minute.charAt(minute.length-2)*50+'px');
	$('#min2').css('text-indent', '-'+minute.charAt(minute.length-1)*50+'px');
	clock();
}

I need help updating my jQuery clock. setInterval and looping the function doesn't seem to work. The variables are updating well but the css properties are not. Basically, my clock works by pushing the images off a <li> tag so the it shows only one number. The position of the the image is suppose to change with the time. The only correct time I get is when I refresh the page.

Any help is appreciated.

  • 2 Contributors
  • 6 Replies
  • 166 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by Agent Cosmic
Member Avatar for Airshow

Agent Cosmic,

Personally I avoid setInterval in favour of repeated setTimeout s.

Here is a version of your code framed in a namespace pattern:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Airshow :: Jquery Clock</title>
<style type="text/css">
#clockWrapper {
	width: 150px;
	padding: 10px;
	border: 2px solid #000;
	text-align: center;
}
#clock {
	font-family:verdana;
	font-weight:bold;
	font-size:9pt;
}
#clock span {
	margin-right: 2px;
	padding: 4px;
	background-color: #000000;
	color: #FFF;
	line-height: 2.0em;
}
#clockControls { margin-top: 5px; }
</style>
<script src="!Libs/jquery-1[1].3.2.min.js" type="text/javascript"></script>
<script>
var CLOCK = function(){//Singleton namespace pattern.
	var t = null;
	var allow;
	var interval = 500;
	var containers = [ '', '', '' , '' , '' ];
	var colors = [ '#F9F', '#000' ];
	colors.set = false;
	return {
		setInterval : function(x){
			interval = parseInt(x);
		},
		setColor : function(a){//array comprising [color1, color2]
			if(a && typeof a == 'object' && a.length){
				colors = a;
				if('#wrapper') {
					if(a.length>=1) {
						if(containers[0]) { $('#'+containers[0]).css( { backgroundColor : a[0] } ); }
						if(containers[1]) { $('#'+containers[1]+'> span').css( { color : a[0] } ); }
					}
					if(colors.length>=2) {
						if(containers[0]) { $('#'+containers[0]).css( { borderColor : a[1] } ); }
						if(containers[1]) { $('#'+containers[1]+'> span').css( { backgroundColor : a[1] } ); }
					}
				}
				colors.set = true;
			}
		},
		setContainers : function(a){//array comprising [clockWrapperID, clockID, hourID, minuteID, secondID]
			if(a && typeof a == 'object' && a.length){
				containers = a;
			}
		},
		start : function(){
			if(!colors.set) { CLOCK.setColor(colors); }
			allow = true;
			$('#startButton').attr( { disabled : 1 } );
			$('#stopButton').attr( { disabled : 0 } );
			CLOCK.showCurrent();
			if(this.blur) { this.blur(); }
		},
		stop : function(){
			allow = false;
			$('#startButton').attr( { disabled : 0 } );
			$('#stopButton').attr( { disabled : 1 } );
			if(this.blur) { this.blur(); }
		},
		showCurrent : function(){
			clearTimeout(t);
			var d = new Date();
			var hour =   d.getHours();
			var minute = d.getMinutes();
			var second = d.getSeconds();
			if(containers[2]) $('#'+containers[2]).text( (hour   < 10) ? ('0' + hour  ) : hour   );
			if(containers[3]) $('#'+containers[3]).text( (minute < 10) ? ('0' + minute) : minute );
			if(containers[4]) $('#'+containers[4]).text( (second < 10) ? ('0' + second) : second );
			if(allow) { t = setTimeout( function(){ CLOCK.showCurrent(); }, interval ); }
		}
	};
}();

$(document).ready(function(){
	$('#startButton').click(CLOCK.start);
	$('#stopButton').click(CLOCK.stop);
	CLOCK.setInterval( 500 );
	CLOCK.setContainers( ['clockWrapper', 'clock', 'clock_hr', 'clock_min', 'clock_sec'] );
	CLOCK.setColor( ['#FFF', '#006699'] );
	CLOCK.start();
});
</script>
</head>

<body>

<div id="clockWrapper">
	<div id="clock">
		<span id="clock_hr"></span>
		<span id="clock_min"></span>
		<span id="clock_sec"></span>
	</div>
	<div id="clockControls">
		<button id="startButton">START</button>&nbsp;
		<button id="stopButton">STOP</button>
	</div>
</div>

</body>
</html>

You probably don't need the START/STOP buttons, so they can be deleted. The clock will run with or without them.

Airshow

Edited by Airshow because: n/a
Member Avatar for Agent Cosmic

What is suppose to happen? I tried running the code but I see no changes. And I do not understand your coding, too. I'm not an expert in javascript yet.

Member Avatar for Airshow

Agent_C,

The line <script src="!Libs/jquery-1[1].3.2.min.js" type="text/javascript"></script> points to my local copy of jquery. You need to change it to whatever you normally use.

Airshow

Edited by Airshow because: n/a
Member Avatar for Agent Cosmic

This works great. Thank you very much for your help.

Apparently the problem with my code was the setTimeout statement.
Mine was:
setTimeout('clock()', 1000 );

While it should have been:
setTimeout(function(){ clock(); }, 1000 );

Would you mind if I asked you why setting a function in a function is necessary?

Member Avatar for Airshow

Would you mind if I asked you why setting a function in a function is necessary?

I will try but please forgive me if my explanation is inadequate.

It's all to do with "scope". If you don't know what scope is, then research it. It's kind of fundamental to any programming language.

The setTmeout('...', n) form is very limited in that it puts in place a future call from the global namespace and hence can only access members (functions, variables, objects) in the global namespace - ie. members that are in scope.

The setTmeout(function(){...}, n) form is more flexible in that the function's code has access to all members that are in scope at the point where the setTimeout is created. Due to a feature of javascript called "closure", this is so even though the outer function will typically have completed and returned when the timeout's function eventually executes. This is counterintuitive. Global members are also in scope.

In my t = setTimeout( function(){ CLOCK.showCurrent(); }, interval ); statement, I had to use the function form otherwise, on execution, it would not recognise CLOCK, which is an object local to $(document).ready(function(){...}); . In other words, CLOCK is not in scope to anything in the global namespace.

Hope this helps.

Airshow

Edited by Airshow because: n/a
Member Avatar for Agent Cosmic

Thanks a lot for your help.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.