Powered by WHUK®

Announcement

Collapse
No announcement yet.

Tick Tock: Amazing Analog Clock with CSS

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • 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


    How to setup

    Step 1: CSS below for styling thescript, place it into HEAD section
    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: Place HTML 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: downloads
    Files
    clock_bg.jpg
    hours-arm.gif
    hours-arm.png
    minutes-arm.gif
    minutes-arm.png
    SECS.gif






Working...
X