Full version: jsB@nk » Time » Clock » Tick Tock: Amazing Analog Clock with CSS
URL: https://www.javascriptbank.com/tick-tock-amazing-analog-clock-with-css.html
This JavaScript code example will create a super beautiful analog clock with amazing layout on your web pages. However, this JavaScript analog clock still has some disadvantages: it uses a very large picture for background, up to 512x512 pixels hence you can not resize your clock easily; but its source code is very simple to setup.If you still want, let check more JavaScript code examples to build awesome digital/analog clocks on jsB@nk: - Cool Analog Clock with Raphael by Amazing Styles - jsClock: Featured Digital Clock JavaScript - 10 Tiptop Analog and Digital Clock Resources and Techniques with Javascript - CoolClock: Super nice Javascript Analog Clock
Full version: jsB@nk » Time » Clock » Tick Tock: Amazing Analog Clock with CSS
URL: https://www.javascriptbank.com/tick-tock-amazing-analog-clock-with-css.html
<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><script type="text/javascript" language="javascript">var g_nLastTime = null;function cssClock(hourElementId, minuteElementId){// Check if we need to do an updatevar objDate = new Date();if(!g_nLastTime || g_nLastTime.getHours() > objDate.getHours() || g_nLastTime.getMinutes() <= (objDate.getMinutes() - 5)){// make sure parameters are validif(!hourElementId || !minuteElementId) { return; }// get the element objectsvar objHour = document.getElementById(hourElementId);var objMinutes = document.getElementById(minuteElementId);if (!objHour || !objMinutes) { return; }// get the timevar nHour = objDate.getHours();if (nHour > 12) { nHour -= 12; } // switch from 24-hour to 12-hour systemvar nMinutes = objDate.getMinutes();// round the timevar nRound = 5;var nDiff = nMinutes % nRound;if(nDiff != 0){if (nDiff < 3) { nMinutes -= nDiff; } // round downelse { nMinutes += nRound - nDiff; } // round up}if(nMinutes > 59){// handle increase the hour insteadnHour++;nMinutes = 0;}// Update the on page elementsobjHour.className = 'hr' + nHour;objMinutes.className = 'min' + nMinutes;// Timer to update the clock every few minutesg_nLastTime = objDate;}// Set a timer to call this function againsetTimeout(function() { cssClock(hourElementId, minuteElementId); }, 60000); // update the css clock every minute (or so)}</script><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>/javascript/time/Tick_Tock_Amazing_Analog_Clock_with_CSS/clock_bg.jpg/javascript/time/Tick_Tock_Amazing_Analog_Clock_with_CSS/hours-arm.gif/javascript/time/Tick_Tock_Amazing_Analog_Clock_with_CSS/hours-arm.png/javascript/time/Tick_Tock_Amazing_Analog_Clock_with_CSS/minutes-arm.gif/javascript/time/Tick_Tock_Amazing_Analog_Clock_with_CSS/minutes-arm.png/javascript/time/Tick_Tock_Amazing_Analog_Clock_with_CSS/SECS.gif