活动报名用什么小程序_JS完成网页时钟特效

JS实现网页时钟特效       这篇文章主要为大家详细介绍了JS实现网页时钟特效,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了JS实现网页时钟特效的具体代码,供大家参考,具体内容如下

主要逻辑 根据JS 的Date属性 求得当前的 时 分 秒 之后,按照 360/(时|分|秒)  来对三个指针元素进行旋转

 !DOCTYPE html 
 html lang="en" 
 head 
 meta charset="UTF-8" 
 title Title /title 
 style 
 #box {
 width: 600px;
 height: 600px;
 /*border: 1px solid #000;*/
 background: url("img/bg.png") no-repeat;
 background-size: cover;
 margin: 30px auto;
 position: relative;
 overflow: hidden;
 width:100%;
 height:100%;
 background: url("img/h.png") no-repeat;
 background-size: cover;
 position: absolute;
 width:100%;
 height:100%;
 background: url("img/m.png") no-repeat;
 background-size: cover;
 position: absolute;
 width:100%;
 height:100%;
 background: url("img/s.png") no-repeat;
 background-size: cover;
 position: absolute;
 /style 
 /head 
 body 
 div id="box" 
 div id="h" /div 
 div id="m" /div 
 div id="s" /div 
 /div 
 script 
 window.onload = function(){
 // 1:找到三个元素标签
 var h = document.getElementById("h"); //时
 var m = document.getElementById("m"); //分
 var s = document.getElementById("s"); //秒
 setInterval(function(){
 var date = new Date();
 var HH = (date.getHours()%12);
 var MM = date.getMinutes();
 var SS = date.getSeconds();
 h.style.transform = "rotate("+(HH*30)+"deg)";
 m.style.transform = "rotate("+(MM*6)+"deg)";
 s.style.transform = "rotate("+(SS*6)+"deg)";
 },1000)
 /script 
 /body 
 /html 

更多JavaScript时钟特效点击查看:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。


相关阅读