脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-jquery版时钟（css3实现），脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 做时钟的主要原因是因为喜欢，觉得它好看（本人对特效有点爱不释手……）。做的时候感觉工程量会有点大，做着做着发现实现起来其实并不难，只要理清思绪，其实还蛮简单的（我制作东西喜欢整体方向制定好，然后边做边找感觉，最后可能会有不一样的惊喜）。
我这里采用了时钟的背景图片，第一我觉得图片好看，第二我觉得应该先实现主要的功能再考虑画图（总归来说就是有点懒，哈哈~）。好了，废话不多说啦，进入正题。
一、图片演示
二、htML代码
复制代码
<p class="box">
<p class="clock"> <!-- 时钟背景图 -->
<p class="second-hand"></p> <!-- 秒针 -->
<p class=";minute-hand"></p> <!-- 分针 -->
<p class="hour-hand"></p> <!-- 时针 -->
</p>
</p>
复制代码
三、css代码
复制代码
.box {margin: 10px auto; width: 894px; height: 863px;}
.clock {posITion: relative; width: 894px; height: 863px; background: url("images/bg.png") no-rePEat;}
.second-hand,.minute-hand,.hour-hand {position: absolute; left: 50%; margin-left: -6px; top: -13px; width: 20px; height: 894px; background: url("images/clock_needle.png") no-repeat;}
/* 三根针的长度和时钟的宽度保持一致（最长的），这样可以实现以中心旋转 */
.second-hand {background-position: -1px 59px; z-index: 1000;}
.minute-hand {background-position: -25px 56px; z-index: 100;}
.hour-hand {background-position: -54px 56px; z-index: 10;}
复制代码
分析：
这里需要注意的是，要让秒针、分针和时针的长度和时钟的宽度（长度，谁长就和谁一样）一致（时钟最好是正方形的），因为图片旋转的时候，是以图片中心为圆心旋转。
四、js代码
复制代码
$(function(){
VAR $second = $(".second-hand"), /* 秒针 */
$minute = $(".minute-hand"), /* 分针 */
$hour = $(".hour-hand"), /* 时针 */
nowTime = function(){ /* 执行函数 */
/* 得到现在的小时，分钟和秒 */
function getTime(){
var now = new Date();
return {
hours: now.getHours() + now.getMinutes() / 60, /* 小时数，包括分钟数 */
minutes: now.getMinutes() + now.getSeconds() / 60, /* 分针数，包括秒数 */
seconds: now.getSeconds() /* 秒数 */
}
}
var _date = getTime(); /* 接收的时间对象 */
/* 秒针，一圈360度总共是60秒（60格），一秒（一格）就是6度，乘以6的主要原因就是秒数乘以一格的度数等于总度数 */
var _secondRotate = Math.floor(_date.seconds) * 6;
/* 分针，一圈360度总共是60分钟，和秒数解释类似 */
var _minuteRotate = _date.minutes * 6;
/* 时针，一圈360度是12个小时，一个小时就是30度（其实也是5格），小时数乘以一小时的度数就是总度数。但是要考虑大于12的小时数，这里采取整除12的方发即可实现 */
var _hourRotate = (_date.hours % 12) * 30;
$second.css({"transform":"rotate("+_secondRotate+"deg)"}); /* 设置秒针旋转度 */
$minute.css({"transform":"rotate("+_minuteRotate+"deg)"}); /* 设置分针旋转度 */
$hour.css({"transform":"rotate("+_hourRotate+"deg)"}); /* 设置时针旋转度 */
}
setInterval(nowTime,1000); /* 循环调用，一秒后调用一次 */
})
复制代码
分析：
注释讲解的比较清楚，我这里主要强调一下如何获取秒针、分针和时针的旋转度数。
秒针，旋转一圈总共是60秒，一圈也就是360°。这样想想，一秒就是6°，一圈总共是60格，一秒是一格也是6°，即秒针的旋转度数就是秒数乘以6。
分针，分针的解释和秒针类似。它旋转一圈是60分钟，所以一分钟旋转6度，一分钟是一格也是6°，即分针的旋转度数是分钟数乘以6。
时针，一圈是12个小时，一个小时应该是360/12=30°，所以时针的旋转角度为小时数乘以30°。也可以这样解释，一个小时占了5格，一格是6°，即小时数乘以5再乘以6则是时针旋转度数。
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的javascript代码实例教程-jquery版时钟（css3实现）全部内容，希望文章能够帮你解决javascript代码实例教程-jquery版时钟（css3实现）所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。