Helpful JavaScript for Web development

[JavaScriptBank]

JavaScript codes for Web DEV

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 (http://www.javascriptbank.com/dhtml-analog-clock-ii.html) at JavaScriptBank.com - 2.000+ free JavaScript codes (http://www.javascriptbank.com/)


http://www.javascriptbank.com/javascript.images/time/tick-tock-amazing-analog-clock-with-css.jpg (http://www.javascriptbank.com/javascript/time/clock-time-date/tick-tock-amazing-analog-clock-with-css/preview/en/)
Demo: JavaScript Tick Tock: Amazing Analog Clock with CSS (http://www.javascriptbank.com/tick-tock-amazing-analog-clock-with-css.html/en/)


[U]How to setup

Step 1: Copy & Paste CSS code below in your 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: Place JavaScript 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: must download files below
Files
clock_bg.jpg (http://www.javascriptbank.com/javascript/time/Tick_Tock_Amazing_Analog_Clock_with_CSS/clock_bg.jpg)
hours-arm.gif (http://www.javascriptbank.com/javascript/time/Tick_Tock_Amazing_Analog_Clock_with_CSS/hours-arm.gif)
hours-arm.png (http://www.javascriptbank.com/javascript/time/Tick_Tock_Amazing_Analog_Clock_with_CSS/hours-arm.png)
minutes-arm.gif (http://www.javascriptbank.com/javascript/time/Tick_Tock_Amazing_Analog_Clock_with_CSS/minutes-arm.gif)
minutes-arm.png (http://www.javascriptbank.com/javascript/time/Tick_Tock_Amazing_Analog_Clock_with_CSS/minutes-arm.png)
SECS.gif (http://www.javascriptbank.com/javascript/time/Tick_Tock_Amazing_Analog_Clock_with_CSS/SECS.gif)







Command to print web page in javascript (http://www.javascriptbank.com/window-print-method.html) - Javascript Time Picker (http://www.javascriptbank.com/time-picker-with-child-window.html) - JavaScript Go To URL Box (http://www.javascriptbank.com/go-to-url.html)


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, goods or services available on or through any such site or resource.

[ailen]

Sounds good,
Just the great part of information shared by you.
Thanks for it.

[nazar2011]

Thanks for sharing the coding.Its really nice.The tricks are really very informational for me.It is not exactly my problem but I have got some idea to design it in a different way.Thanks again.

[Sabrina Gage]

Nice sharing.

And thank you for the setup guide.