JS实现网页时钟特效
更新时间:2020年03月25日 11:08:12 作者:Byte_Dance
这篇文章主要为大家详细介绍了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; } #h{ width:100%; height:100%; background: url("img/h.png") no-repeat; background-size: cover; position: absolute; } #m{ width:100%; height:100%; background: url("img/m.png") no-repeat; background-size: cover; position: absolute; } #s{ 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时钟特效点击查看:JavaScript时钟特效专题
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
js读写COOKIE实现记住帐号或密码的代码(js读写COOKIE)
js实现记住帐号或密码(js读写COOKIE) 的实现代码,原理就是利用cookies保存于读取功能。2010-05-05JavaScript SweetAlert插件实现超酷消息警告框
SweetAlert是一款使用纯js制作的消息警告框插件.这篇文章主要介绍了JavaScript SweetAlert插件实现超酷消息警告框的相关资料,需要的朋友可以参考下2016-01-01
最新评论