“钟表展示项目”说明文件(文件末尾附相应代码)

一、最终效果展示：

二、项目亮点

1.代码结构清晰明了

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

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

4.提高浏览器兼容性

三、知识点的总结：

JQuery，原生javascript，css3，h5

四.重难点讲解

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

首先，我们必须澄清以下概念：

时钟指针旋转360度一次

时针：

表盘上有12个小时，每过一个小时，必须旋转30度；

分针：

表盘上有60个小格子，分针穿过小格子后每分钟旋转6度；

二手：

表盘上有60个小格子，秒针穿过小格子后每分钟旋转6度；

(1)当前时间的获取

例如(以顺时针旋转角度为例):例如，当前时间为9:28；

当经过时，时针应该在9和10之间

模式只能得到整点，所以需要同时得到当前的小时和当前的分钟，这样才能更好的确定时针的旋转角度，具体如下：

(2)获取旋转角度

由于时针每小时旋转30度，因此时针的旋转角度如下：

同样，分针和秒针的旋转角度如下：

分针：

二手：

为了让时钟更精确，这里精确到毫秒；

(3)执行频率，即秒针旋转频率控制

调整功能的执行时间间隔可以改变秒针的旋转频率。

动词（verb的缩写）待优化项目

1.页面过于简洁，需要进一步优化完善；

2.绘图时及时在时钟上画出分、秒刻度；

不及物动词项目中各部分的代码

1.HTML代码

！DOCTYPE html html xmlns=' http://www . w3 . org/1999/XHTML ' head meta http-equiv=' Content-Type ' Content=' text/html；Charset=utf-8' /titlejQuery指针时钟(带日期)/title！-引入外部css样式-link rel='样式表' href=' CSS/demo.css' rel='外部no follow ' type=' text/CSS ' media=' screen '/head dy！-导入jQuery库文件-script src=' http : js/jQuery-1 . 6 . 2 . min . js '/script！-引入外部js文件-script src=' http : js/script . js '/script div style=' text-align : center；Clear:两者'/div/body/html2.css代码

* {边际：0划水：0;}车身{背景： # f9f 9 F9；color : # 000 font :15 px Calibri，Arial，无衬线字体；文字-阴影：1 px 2px 1px # FFFFFF}a，a :已访问{ text-摆设：无；outline : none color : # fff } a :悬停{ text-decoration :下划线；color: # ddd}/*页脚（尾部)*/页脚{ background:#444 url('./images/BG-页脚。png ')重复；位置：固定；宽度：100%;高度：70 px底部：0;left :0 color : # ffft ext-shadow :2 px2px # 000；/*提高浏览器的兼容性*/-moz-box-shadow :5 px 1px 10px # 000；-web套件-box-shadow :5 px 1px 10px # 000；箱形阴影：5 px 1px 10px # 000}页脚h1 { font :25 px/26px Acnes；字体粗细：正常；左侧：50%;余量：0 px 0 0 150 pxpadd :25 px 0；位置：相对；宽度宽度：400px}页脚a.orig，a . orig :已访问{ background:url('./images/demo2.png ')无重复右上方；border:none文本装饰：无；color : # FCFCFCfont-size :14 px；高度：70 px左侧：50%;线高：50 px边距：12 px 0 0-400 px；位置：绝对；top:0宽度宽度：250px}/*时钟样式（时钟样式)*/#时钟{位置：相对；宽度： 600像素；高度： 600像素；列表样式：无；余量： 20px自动；背景： url('./images/clock.png ')无重复中心；} #秒，#分，#小时{绝对位置：宽度： 30px高度： 580像素；left : 270 px } # date { position : absolutetop : 365 pxcolor : # 666 right : 140 pxfont-weight :粗体；字母-间距： 3px字体系列： '微软雅黑；font-size : 30px线高： 36px}#hours{ background: url('./images/hands.png ')无重复左；z指数： 1000；} #分钟{ background: url('./images/hands.png ')无重复中心；宽度：25 pxz指数： 2000；} #秒{ background: url('./images/hands.png ')无重复右；z指数： 3000；}3.js代码

(1)需要下载一个射流研究…的引用包（百度或者谷歌一下你就知道)

(2)js代码

$(文档)。就绪（函数(){ //动态插入超文本标记语言代码，标记时钟var clock=[ 'ul id='clock '，' li id='date'/li '，' li id='seconds'/li '，' li id='hours'/li '，' li id='分钟'/li '，'/ul'].join(' ')；//逐渐显示时钟，并把它附加到主页面中$(时钟)。fadeIn().appendo(' body ')；//每一秒钟更新时钟视图的自动执行函数//也可以使用此方法：setInterval(函数clock(){ })()；（功能时钟(){ //得到日期和时间var日期=新日期()。getDate()，//得到当前日期小时=新日期()。getHours()，//得到当前小时分钟=新日期()。getMinutes()；//得到当前分钟秒=新日期()。getSeconds()，//得到当前秒ms=新日期()。得到毫秒();//得到当前毫秒//将当前日期显示在时钟上$('#date ').html(日期);//获取当前秒数，确定秒针位置var srotate=秒ms/1000；$(' #秒')。css({ //确定旋转角度transform ' : ' rotate(' srotate * 6 ' deg '，})；//获取当前分钟数，得到分针位置var mrotate=分钟s旋转/60；$(' #分钟')。CSS({ ' transform ' : ' rotate(' mrotate * 6 ' deg ')，//提高浏览器的兼容性-moz-transform ' : ' rotate(' mrotate * 6 ' deg ')，'-WebKit-transform ' : ' rotate(' mrotate * 6 ' deg ')})；//获取当前小时，得到时针位置var hrotate=小时% 12(分钟/60);$(' #小时')。CSS({ ' transform ' : ' rotate(' hro tate * 30 ' deg ')，//提高浏览器的兼容性-moz-transform ' : ' rotate(' hro tate * 30 ' deg ')，'-WebKit-transform ' : ' rotate(' hro tate * 30 ' deg ')})；//每一秒后执行一次时钟函数setTimeout(时钟，1000);})();});4.一些必要的图片素材(c)此处不再一一列举或展示)

注释：

1.改变属性

2 .旋转()方法

以上JavaScript的创意时钟项目(示例说明)是边肖与大家分享的全部内容。希望能给大家一个参考，多支持我们。