1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" 6 content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 <style> 10 .clock{ 11 width: 600px; 12 height: 600px; 13 background: url('images/clock.jpg') no-repeat center center; 14 position: relative; 15 margin: 100px auto ; 16 } 17 .clock div{ 18 width: 100%; 19 height: 100%; 20 position: absolute; 21 left: 0; 22 top: 0; 23 } 24 .h{ 25 background: url("images/hour.png") no-repeat center center; 26 } 27 .m{ 28 background: url("images/minute.png") no-repeat center center; 29 30 } 31 .s{ 32 background: url("images/second.png") no-repeat center center; 33 } 34 </style> 35 </head> 36 <body> 37 <div class="clock"> 38 <div class="h" id="hour"></div> 39 <div class="m" id="minute"></div> 40 <div class="s" id="second"></div> 41 </div> 42 </body> 43 </html> 44 <script> 45 // 特别注意：calssname获得的是一个元素集合，需要的索引值 46 var hour = document.getElementsByClassName("h")[0]; 47 var minute = document.getElementsByClassName("m")[0]; 48 var second = document.getElementsByClassName("s")[0]; 49 // 开始定时器 50 var s = 0,m = 0, h = 0, ms = 0; 51 setInterval(function() { 52 // 内容就可以了 53 var date = new Date(); // 得到最新的时间 54 ms = date.getMilliseconds(); // 现在的毫秒数 55 s = date.getSeconds() + ms / 1000; // 得到秒 1.3 s 56 m = date.getMinutes() + s / 60; // 得到的是分数 45.6分钟 57 h = date.getHours() % 12 + m / 60 ; 58 //console.log(h); 59 //旋转角度 60 // 一圈 360 ° 一共有 60 秒 每秒 6 ° 现在是 s秒 61 second.style.transform = "rotate("+ s*6 +"deg)"; 62 // 变化 旋转 deg 度 63 minute.style.transform = "rotate("+ m*6 +"deg)"; 64 hour.style.transform = "rotate("+ h*30 +"deg)"; 65 66 },100); 67 </script>
2017-12-28