Good and Nice JavaScripts

[JavaScriptBank]

Free JavaSccript codes

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 [URL="http://www.javascriptbank.com/dhtml-analog-clock-ii.html"]JavaScri... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

Demo: JavaScript Tick Tock: Amazing Analog Clock with CSS

How to setup

Step 1: CSS below for styling thescript, place it into HEAD section
CSS

<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

<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: Place HTML below in your BODY section
HTML

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

The Site may provide, or third parties may provide, links to non-JavaScriptBank.com Internet World Wide Web sites or resources. Because JavaScriptBank.com has no control over such sites and resources, you acknowledge and agree that JavaScriptBank.com is not responsible for the availability of such external sites or resources, and does not endorse and is not responsible or liable for any content, advertising, products, or other materials on or available from such sites or resources. You further acknowledge and agree that JavaScriptBank.com shall not be responsible or liable, directly or indirectly, for any damage or loss caused or alleged to be caused by or in connection with use of or reliance on any such content, ***** or services available on or through any such site or resource.