jQuery+css实现的时钟效果（兼容各浏览器）

本文实例讲述了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程序设计有所帮助。