Welcome to WebmasterServe!

FREE TO JOIN! Join us now to engage in informative and friendly discussions about Webmastering, SEO, SEM, Internet Marketing, Programming, Graphic Design, Online Jobs and more. What are you waiting for? Ready to join our friendly community? It takes just one minute to register.

Dismiss Notice

Join WebmasterServe Forums 
Join the discussion! Have a better idea or an opinion? It takes just one minute to register Click Here to Join

My 2 Cents Tick tock: amazing analog clock with css

Discussion in 'Javascript and jQuery' started by JavaScriptBank, May 11, 2011.

Thread Status:
Not open for further replies.
  1. JavaScriptBank

    Yellow Belt

    Jul 11, 2009
    +0 / -0
    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

    How to setup

    Step 1: Place CSS below in your HEAD section
    Select All
    <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
    Select All
    <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
    Select All
    <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

Thread Status:
Not open for further replies.

Share This Page