1.js时钟表盘
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> .clock{ 600px; height: 600px; margin: 50px auto; background: url(./images/clock.jpg) no-repeat; position: relative; } .clock div{ 100%; height: 100%; position: absolute; top: 0; left: 0; } .h{ background: url(./images/hour.png) no-repeat center center; } .m{ background: url(./images/minute.png) no-repeat center center; } .s{ background: url(./images/second.png) no-repeat center center; } </style> </head> <body> <div class="clock"> <div class="h" id="hour"></div> <div class="m" id="minute"></div> <div class="s" id="second"></div> </div> </body> <script> function $(id) { return document.getElementById(id); } var hour = $('hour'); var minute = $('minute'); var second = $('second'); // var date = new Date(); // console.log(date); // console.log(hour); //开始定时 var s =0,m=0,h=0,ms=0; setInterval(function(){ //内容处理开始 var date = new Date();//获取时间 ms = date.getMilliseconds(); //现在的毫秒数 s = date.getSeconds() + ms/1000; m = date.getMinutes() + s / 60; h = date.getHours() % 12 + m /60; // document.write(parseInt(h) +":"+parseInt(m ) +":"+parseInt(s) ); //旋转角度 //一圈 360度 一共60秒 一秒是 6度 second.style.WebkitTransform = "rotate("+s*6 + "deg)"; minute.style.WebkitTransform = "rotate(" + m*6 + "deg)"; hour.style.WebkitTransform = "rotate(" + h*30 + "deg)"; },100); </script> </html>
2.在线预览