JS+CSS3精美指针时钟图标动画特效.zip资源-CSDN文库

共2个文件

html：1个

css：1个

版权申诉

html5

150 浏览量 2023-09-27 22:15:57 上传评论收藏 2KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

JS+CSS3精美指针时钟图标动画特效.zip （2个子文件）

css

style.css 5KB

index.html 2KB

<!doctype html> <html> <head> <meta charset="utf-8"> <title>JS+CSS3精美指针时钟图标动画特效</title> <link type="text/css" href="css/style.css" rel="stylesheet" /> </head> <body> <div id="clock"> <div class="hour"> <div class="min"></div> <div class="min"></div> <div class="min"></div> <div class="min"></div> <div class="min"></div> </div> <div class="hour"> <div class="min"></div> <div class="min"></div> <div class="min"></div> <div class="min"></div> <div class="min"></div> </div> <div id="alarm"> </div> <div id="min"></div> <div id="hour"></div> <div id="sec"></div> <ol> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ol> </div> <script> window.requestAnimFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function( callback ){ window.setTimeout(callback, 1000 / 60); }; })(); //initialize the clock in a self-invoking function (function clock(){ var hour = document.getElementById("hour"), min = document.getElementById("min"), sec = document.getElementById("sec"); //set up a loop (function loop(){ requestAnimFrame(loop); draw(); })(); //position the hands function draw(){ var now = new Date(),//now then = new Date(now.getFullYear(),now.getMonth(),now.getDate(),0,0,0),//midnight diffInMil = (now.getTime() - then.getTime()),// difference in milliseconds h = (diffInMil/(1000*60*60)),//hours m = (h*60),//minutes s = (m*60);//seconds //rotate the hands accordingly sec.style.webkitTransform = "rotate(" + (s * 6) + "deg)"; hour.style.webkitTransform = "rotate(" + (h * 30 + (h / 2)) + "deg)"; min.style.webkitTransform = "rotate(" + (m * 6) + "deg)"; } })(); </script> </body> </html>

评论收藏

内容反馈

版权申诉