本文实例讲述了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); 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); 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'); flower.push('); 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 " + hour : hour; minute = minute < 10 " + minute : minute; second = second < 10 " + 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程序设计有所帮助。