Thread: Tick Tock: Amazing Analog Clock with CSS

This JavaScript code example will create a super beautiful analog clock with amazing layout on your web pages. However, this JavaScri... detail at JavaScriptBank. com - 2.000+ free JavaScript codes

[IMG]hxxp ://w w w.javascriptbank. com/javascript.images/time/tick-tock-amazing-analog-clock-with-css.jpg[/IMG]
Demo: JavaScript Tick Tock: Amazing Analog Clock with CSS

How to setup

Step 1: Use CSS code below for styling the script
CSS

Code:

<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>

Step 2: Copy & Paste JavaScript code below in your HEAD section
JavaScript

Code:

<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>

Step 3: Copy & Paste HTML code below in your BODY section
HTML

Code:

<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>

Step 4: Download files below
Files
clock_bg.jpg
hours-arm.gif
hours-arm.png
minutes-arm.gif
minutes-arm.png
SECS.gif

Javascript floating message - Javascript multi level drop down menu - JavaScript in_array()