原生JS实现实时钟表原生JS实现实时钟表

分享一个用原生JS实现的实时钟表特效，效果如下（PS：实际指针是按360度走的，截图时只截了一部分）
【原生JS实现实时钟表】
上面的效果一共需要4张图片，分别是表盘、时针、分针、秒针，根据需要可以自己做图片，实现的代码如下：

原生JS实现实时钟表.clock {width: 600px; height: 600px; margin: 100px auto; /* 表盘背景 */background: url(images/0.jpg) no-repeat; position: relative; } .clock div {position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* 时针图片 */background: url(images/1.png) no-repeat center center; } #m {/* 分针图片 */background-image: url(images/2.png); } #s {/* 秒针图片 */background-image: url(images/3.png); }

更多JavaScript时钟特效点击查看：JavaScript时钟特效专题
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。