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

    Joined:
    Jul 11, 2009
    Messages:
    85
    Ratings:
    +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
    CSS
    Code:
    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
    JavaScript
    Code:
    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
    HTML
    Code:
    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
    Files
    clock_bg.jpg
    hours-arm.gif
    hours-arm.png
    minutes-arm.gif
    minutes-arm.png
    SECS.gif






     
Thread Status:
Not open for further replies.

Share This Page