Phiên bản đầy đủ: jsB@nk » Thời gian » Đồng hồ » Tick Tock: Đồng hồ kim cực đẹp với CSS
URL: https://www.javascriptbank.com/tick-tock-amazing-analog-clock-with-css.html
Hiệu ứng JavaScript này sẽ tạo ra một đồng hồ kim với giao diện cực đẹp trên trang web của bạn. Tuy nhiên mặt hạn chế chính là nó sử dụng một ảnh nền với kích thước rất lớn, lên đến 512x512 điểm ảnh, do đó bạn sẽ không thể thay đổi kích thước; bù lại mã nguồn cài đặt lại khá đơn giản, chỉ với một vài dòng mã lệnh.Nếu muốn, bạn có thể thưởng thức thêm các hiệu ứng JavaScript khác tạo đồng hồ tuyệt đẹp có trên jsB@nk: - Đồng hồ kim cực đẹp với Raphael và jQuery - 10 tài nguyên JavaScript tạo đồng hồ tuyệt đẹp - CoolClock: Đồng hồ kim tuyệt đẹp với JavaScript
Phiên bản đầy đủ: jsB@nk » Thời gian » Đồng hồ » Tick Tock: Đồng hồ kim cực đẹp với 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