<p align="center">“时钟展示项目”说明文档（文档尾部附有相应代码）

一、最终效果展示：

二、项目亮点

1.代码结构清晰明了

2.可以实时动态显示当前时间与当前日期

3.界面简洁、美观、大方

4.提高浏览器兼容性

三、知识点汇总：

jQuery、原生javascript、css3、h5

四、重难点解释

1.各个指针的旋转角度的获取

首先要明确如下概念：

时钟指针旋转一周360度

时针：

表盘上共有12小时，每经过一小时，要旋转30度；

分针：

表盘上共有60个小格子，分针每走一分钟，经过一个小格子，转动6度；

秒针：

表盘上共有60个小格子，秒针每走一分钟，经过一个小格子，也转动6度；

（1）当前时间的获取

举个例子（以时针旋转角度计算为例）：比如现在时间是 9：28；

时针应该在9和10之间，而通过

方式只能获取到整点，所以既要获取到当前的小时，也要获取到当前的分钟，这样才能更好的来确定时针的旋转角度，即为如下方式：

（2）旋转角度的获取

由于时针每经过一个小时后，旋转30度，故获取时针旋转角度如下：

同理，分针与秒针的旋转角度如下：

分针：

秒针：

为了使时钟更加的精准，这里精确到了毫秒；

（3）执行频率，即秒针旋转频率控制

调整函数的执行时间间隔即可改变秒针转动频率。

五、项目待优化之处

1．页面过于简洁，有待进一步优化和改进；

2．作图时未来得及在时钟上画上分秒的刻度；

六、项目中各部分代码

1.HTML代码

jQuery指针时钟（附带日期）

2.css代码

Box-shadow:5px 1px 10px #000; -webkit-Box-shadow:5px 1px 10px #000; Box-shadow:5px 1px 10px #000; } footer h1 { font:25px/26px Acens; font-weight:normal; left:50%; margin:0px 0 0 150px; padding:25px 0; position:relative; width:400px; } footer a.orig,a.orig:visited { background:url("../images/demo2.png") no-repeat right top; border:none; text-decoration:none; color:#FCFCFC; font-size:14px; height:70px; left:50%; line-height:50px; margin:12px 0 0 -400px; position:absolute; top:0; width:250px; } /*styling for the clock（时钟样式）*/ #clock { position: relative; width: 600px; height: 600px; list-style: none; margin: 20px auto; background: url('../images/clock.png') no-repeat center;

}

seconds,#minutes,#hours

{
position: absolute;
width: 30px;
height: 580px;
left: 270px;
}

date

{
position: absolute;
top: 365px;
color: #666;
right: 140px;
font-weight: bold;
letter-spacing: 3px;
font-family: "微软雅黑";
font-size: 30px;
line-height: 36px;
}

hours

{
background: url('../images/hands.png') no-repeat left;
z-index: 1000;
}

minutes

{
background: url('../images/hands.png') no-repeat center;
width:25px;
z-index: 2000;
}

seconds

{
background: url('../images/hands.png') no-repeat right;
z-index: 3000;
}

3.js代码

（1）需要下载一个js的引用包（百度或者谷歌一下你就知道）

（2）js代码

//动态插入HTML代码，标记时钟
var clock = [
'<ul id="clock">','<li id="date">','<li id="seconds">','<li id="hours">','<li id="minutes">',''].join('');

// 逐渐显示时钟，并把它附加到主页面中
$(clock).fadeIn().appendTo('body');

//每一秒钟更新时钟视图的自动执行函数
//也可以使用此方法： setInterval (function Clock (){})();
(function Clock() {
//得到日期和时间
var date = new Date().getDate(),//得到当前日期
hours = new Date().getHours(),//得到当前小时
minutes = new Date().getMinutes(); //得到当前分钟
seconds = new Date().getSeconds(),//得到当前秒
ms = new Date().getMilliseconds();//得到当前毫秒
//将当前日期显示在时钟上
$("#date").html(date);
//获取当前秒数，确定秒针位置
var srotate = seconds + ms / 1000;
$("#seconds").css({
//确定旋转角度
'transform': 'rotate(' + srotate 6 + 'deg)',});
//获取当前分钟数，得到分针位置
var mrotate = minutes + srotate / 60;
$("#minutes").css({
'transform': 'rotate(' + mrotate 6 + 'deg)',//提高浏览器的兼容性
'-moz-transform': 'rotate(' + mrotate 6 + 'deg)','-webkit-transform': 'rotate(' + mrotate 6 + 'deg)'
});
//获取当前小时，得到时针位置
var hrotate = hours % 12 + (minutes / 60);
$("#hours").css({
'transform': 'rotate(' + hrotate 30 + 'deg)',//提高浏览器的兼容性
'-moz-transform': 'rotate(' + hrotate 30 + 'deg)','-webkit-transform': 'rotate(' + hrotate * 30 + 'deg)'
});
//每一秒后执行一次时钟函数
setTimeout(Clock,1000);
})();
});

4.一些必要的图片素材（c此处不再一一列举或展示）

注释：

1.Transform 属性

2.rotate() 方法

以上这篇JavaScript之创意时钟项目(实例讲解)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持编程之家。

原文链接：https://www.f2er.com/js/35652.html

JavaScript 创意时钟

上一篇：浅谈js的解析顺序作用域严格模式下一篇：深入浅析javascript继承体系

JavaScript之创意时钟项目(实例讲解)