Â« Â»

This JavaScript code example will create a super beautiful analog clock with amazing layout on your web pages. However, this JavaScript analog clock still has some disadvantages: it uses a very large picture for background, up to 512x512 pixels hence you can not resize your clock easily; but its source code is very simple to setup.

If you still want, let check more JavaScript code examples to build awesome digital/analog clocks on jsB@nk:

- Cool Analog Clock with Raphael by Amazing Styles
- jsClock: Featured Digital Clock JavaScript
- 10 Tiptop Analog and Digital Clock Resources and Techniques with Javascript
- CoolClock: Super nice Javascript Analog Clock

Label: JavaScript analog clock, JavaScript time clock, JavaScript timer clock, cool analog clock, digital analog clock, analog time clock, analog alarm clock, free analog clock, JavaScript analog clock, Tick Tock, Amazing Analog Clock

For the best in Cable TV, High Speed Internet & Home Phone Service order Comcast Deals and save money.

Report to us error of this JavaScript

Demo
Enlarge
Reload
New window

Code
Files
CSS
JavaScript
HTML
Print

Copy All x2

<style type="text/css">
	#clockbase {
		width: 512px;
		height: 512px;
		position: relative;
		margin: 0 auto;
		background: url(clock_bg.jpg) no-repeat;
	}
	#minutes {
		width: 229px;
		height: 229px;
		position: absolute;
		top: 200px;
		left: 137px;
		background: url(minutes-arm.png) no-repeat;
	}
	#hours {
		width: 200px;
		height: 200px;
		position: absolute;
		top: 220px;
		left: 150px;
		background: url(hours-arm.png) no-repeat left bottom;
	}
	#seconds {
		width: 260px;
		height: 260px;
		position: absolute;
		top: 184px;
		left: 120px;
		background: url(SECS.gif) no-repeat;
		
	}
	#clockbase .min05 {background-position: left top;}
	#clockbase .min10 {background-position: left -229px;}
	#clockbase .min15 {background-position: left -458px;}
	#clockbase .min20 {background-position: left -687px;}
	#clockbase .min25 {background-position: left -916px;}
	#clockbase .min30 {background-position: left -1145px;}
	#clockbase .min35 {background-position: left -1374px;}
	#clockbase .min40 {background-position: left -1603px;}
	#clockbase .min45 {background-position: left -1832px;}
	#clockbase .min50 {background-position: left -2061px;}
	#clockbase .min55 {background-position: left -2290px;}
	#clockbase .min00 {background-position: left -2519px;}
	
	#clockbase .hr1 {background-position: left top;}
	#clockbase .hr2 {background-position: left -200px;}
	#clockbase .hr3 {background-position: left -400px;}
	#clockbase .hr4 {background-position: left -600px;}
	#clockbase .hr5 {background-position: left -800px;}
	#clockbase .hr6 {background-position: left -1000px;}
	#clockbase .hr7 {background-position: left -1200px;}
	#clockbase .hr8 {background-position: left -1400px;}
	#clockbase .hr9 {background-position: left -1600px;}
	#clockbase .hr10 {background-position: left -1800px;}
	#clockbase .hr11 {background-position: left -2000px;}
	#clockbase .hr12 {background-position: left -2200px;}
	
	*html #minutes {
		background: url(minutes-arm.gif) no-repeat;
	}
	*html #hours {
		background: url(hours-arm.gif) no-repeat left bottom;
	}
	</style>

Copy All x2

<script type="text/javascript" language="javascript">
		var g_nLastTime = null;
		
		function cssClock(hourElementId, minuteElementId)
		{
			// Check if we need to do an update
			var objDate = new Date();
			if(!g_nLastTime || g_nLastTime.getHours() > objDate.getHours() || g_nLastTime.getMinutes() <= (objDate.getMinutes() - 5))
			{
				// make sure parameters are valid
				if(!hourElementId || !minuteElementId) { return; }

				// get the element objects
				var objHour = document.getElementById(hourElementId);
				var objMinutes = document.getElementById(minuteElementId);
				if (!objHour || !objMinutes) { return; }

				// get the time
				var nHour = objDate.getHours();
				if (nHour > 12) { nHour -= 12; }  // switch from 24-hour to 12-hour system
				var nMinutes = objDate.getMinutes();

				// round the time
				var nRound = 5;
				var nDiff = nMinutes % nRound;
				if(nDiff != 0)
				{
					if (nDiff < 3) { nMinutes -= nDiff; } // round down
					else { nMinutes += nRound - nDiff; } // round up
				}
				if(nMinutes > 59)
				{
					// handle increase the hour instead
					nHour++;
					nMinutes = 0;
				}

				// Update the on page elements
				objHour.className = 'hr' + nHour;
				objMinutes.className = 'min' + nMinutes;

				// Timer to update the clock every few minutes
				g_nLastTime = objDate;
			}

			// Set a timer to call this function again
			setTimeout(function() { cssClock(hourElementId, minuteElementId); }, 60000); // update the css clock every minute (or so)
		}
	</script>

Copy All x2

<div id="clockbase">
	    <div class="hr10" id="hours"></div>
	    <div class="min10" id="minutes"></div>
		<div id="seconds"></div>
	</div>
	<script type="text/javascript" language="javascript">
	cssClock('hours', 'minutes');
	</script>