本文實例講述了jQuery+css實現的時鐘效果。分享給大家供大家參考，具體如下：
運行效果截圖如下：
這里沒有做太多的修飾，簡單的實現了一下功能，另外，用的是js的setTimeout方法，當時間長了之后，會有一定的延時，建議，在每隔多少分鐘執行一次時鐘校準！哈哈，都有誤差的嘛，反正我是沒給你校。
具體代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <script src="jquery-1.7.1.min.js" type="text/javascript"></script> <script type="text/javascript" > var addRadian = Math.PI / 30; var wrapper = null; var minutes = 0; var hours = 0; var secondsLineLength = 14; var secondLineLength = 20; function cloneObj(obj1) { var tempObj = {}; for (var i in obj1) { if (obj1.hasOwnProperty(i)) { tempObj[i] = obj1[i]; } } return tempObj; } function createMinute(po, r, text) { var minute = []; minute.push('<div class="minute" style="left:'); minute.push(po.x); minute.push('px; top:'); minute.push(po.y); minute.push('px;" >'); minute.push(text); minute.push('</div>'); wrapper.append(minute.join('')); } function createHour(po, r, text) { var minute = []; minute.push('<div class="hour" style="left:'); minute.push(po.x); minute.push('px; top:'); minute.push(po.y); minute.push('px;" >'); minute.push(text); minute.push('</div>'); wrapper.append(minute.join('')); } function initSeconds(text, center, range) { var now_seconds = new Date().getSeconds(); now_seconds = now_seconds > 0 ? now_seconds - 1 : 0; for (var i = 0; i < secondsLineLength + 1; i++) { createFlower(center, '●', range, (i + 1) * secondLineLength, Math.PI / 2 + (now_seconds) * addRadian, true, i == secondsLineLength ? true : false); } } function initMinutes(r, text, center) { var x = 0, y = 0; for (var i = 0; i < 60; i++) { x = center.x - Math.cos(Math.PI / 2 + i * addRadian) * (r + secondLineLength); y = center.y - Math.sin(Math.PI / 2 + i * addRadian) * (r + secondLineLength); createMinute({x: x,y: y}, r, text); } minutes = new Date().getMinutes(); waldedMinute(minutes); } function initHours(r, text, center) { var x = 0, y = 0; for (var i = 0; i < 60; i+=5) { x = center.x - Math.cos(Math.PI / 2 + i * addRadian) * (r + secondLineLength); y = center.y - Math.sin(Math.PI / 2 + i * addRadian) * (r + secondLineLength); createHour({ x: x, y: y }, r, text); } hours = new Date().getHours(); waldedHour(hours); } function waldedMinute(index) { var index = Math.floor((index % 60)) > 0 ? Math.floor((index % 60)) + 1 : 0; wrapper.find(".minute:lt(" + index + ")").css('color', "green"); if (index > 0) { wrapper.find(".minute:eq(0)").css('color', '#DDDDDD'); } } function waldedHour(index) { var index = Math.floor((index%12)) > 0 ? Math.floor((index%12)) + 1:0; wrapper.find(".hour:lt(" + index + ")").css('color', "green"); if(index > 0) { wrapper.find(".hour:eq(0)").css('color', '#494949'); } } function animation(obj, r, radian, range, center, text, last) { logNowTime(); radian += addRadian; var x = center.x - Math.cos(radian) * r; var y = center.y - Math.sin(radian) * r; obj.css({ "left": x, "top": y }); if (last && radian > Math.PI * 5 / 2 - 0.1) { radian = Math.PI / 2; minutes++; if (minutes < 60) { } else { if (minutes % 60 == 0) { hours++; if (hours % 12 != 0) { } else { wrapper.find(".hour").css('color', "#494949"); } waldedHour(hours); } else { wrapper.find(".minute").css('color', "#DDDDDD"); } } waldedMinute(minutes); } setTimeout(function () { animation(obj, r, radian, range, center, text, last); }, 1000); } function createFlower(center, text, range, r, radian, autoAnimate, last) { var flower = []; flower.push('<div class="second"'); flower.push(' style="left:'); flower.push(center.x); flower.push('px; top:'); flower.push(center.y); flower.push('px;'); flower.push(autoAnimate ? '" >' : 'color:red;" >'); flower.push(text); flower.push('</div>'); flower = $(flower.join('')); flower.appendTo(wrapper); //var r = (index + 1) * secondLineLength; if (autoAnimate) { animation(flower, r, radian, range, center, text, last); } } // 查看當前時間 function logNowTime() { var date = new Date(), hour = date.getHours(), minute = date.getMinutes(), second = date.getSeconds(); hour = hour < 10 ? "0" + hour : hour; minute = minute < 10 ? "0" + minute : minute; second = second < 10 ? "0" + second : second; $("#time").html("當前時間-" + hour + ":" + minute + ":" + second); } $(document).ready(function () { wrapper = $("#wrapper"), width = wrapper.width(), height = wrapper.height(), offLeft = parseInt(wrapper.offset().left), range = { x: offLeft, y: 0, x1: offLeft + width, y1: height }, center = { x: Math.round(width / 2) + offLeft, y: Math.round(height / 2) }; initHours(secondLineLength * secondsLineLength + 40, '●', center); initMinutes(secondLineLength * secondsLineLength + 20, '●', center); initSeconds('●', center, range); }); </script> <style type="text/css" > body { margin:0; padding:0; } #wrapper { margin:0 auto; width:1000px; height:780px; background:black; } .second { width:12px; height:12px; position:absolute; text-shadow:1px 1px 1px green; color:Green; } .minute { color:#DDDDDD; position:absolute;} .hour { color:#494949; position:absolute;} #time { font-size:30px; line-height:30px; text-shadow:2px 2px 2px green; text-align:center; } </style></head><body><div id="time"></div><div id="wrapper" ></div></body></html>更多關于jQuery特效相關內容感興趣的讀者可查看本站專題：《jQuery常見經典特效匯總》及《jQuery動畫與特效用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
新聞熱點
疑難解答
