1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <!-- <script src="../tools/jquery-3.4.1.js"></script> --> 9 <title>动态时钟</title> 10 <style> 11 * { 12 margin: 0; 13 padding: 0; 14 background: gray; 15 } 16 17 .wrapper { 18 position: absolute; 19 left: 50%; 20 top: 50%; 21 margin-top: -150px; 22 margin-left: -150px; 23 width: 300px; 24 height: 300px; 25 /* background: white; */ 26 } 27 28 .horologe { 29 /* 没有指针的时钟图片 */ 30 background: url(img/原子钟2.png); 31 background-size: 100%; 32 width: 100%; 33 height: 100%; 34 border-radius: 50%; 35 display: flex; 36 justify-content: center; 37 align-items: center; 38 } 39 40 /* 圆心 */ 41 .clock { 42 background: red; 43 width: 10px; 44 height: 10px; 45 border-radius: 50%; 46 } 47 48 /* 刻度在没有背景图片时使用 */ 49 .scale { 50 position: absolute; 51 background: red; 52 width: 5px; 53 height: 15px; 54 border-radius: 5px; 55 } 56 57 .shi { 58 59 display: flex; 60 flex-direction: row; 61 justify-content: center; 62 background: rgb(28, 28, 29); 63 width: 6px; 64 height: 80px; 65 /* transform: rotate(0deg); */ 66 transform-origin: 3px 70px; 67 border-radius: 5px; 68 position: absolute; 69 top: 80px; 70 } 71 72 .shi::before { 73 content: ''; 74 display: block; 75 width: 5px; 76 height: 10px; 77 background: rgb(28, 28, 29); 78 transform: rotate(160deg); 79 position: relative; 80 top: -5px; 81 left: 3px; 82 border-radius: 50%; 83 } 84 85 .shi::after { 86 position: relative; 87 content: ''; 88 display: block; 89 width: 5px; 90 height: 10px; 91 background: rgb(28, 28, 29); 92 transform: rotate(-160deg); 93 top: -5px; 94 left: -3px; 95 border-radius: 50%; 96 } 97 98 .fen { 99 display: flex; 100 flex-direction: row; 101 justify-content: center; 102 background: rgb(28, 28, 29); 103 width: 4px; 104 height: 115px; 105 /* transform: rotate(10deg); */ 106 transform-origin: 2px 100px; 107 border-radius: 5px; 108 position: absolute; 109 top: 50px; 110 } 111 112 .miao { 113 display: flex; 114 flex-direction: row; 115 justify-content: center; 116 background: rgb(28, 28, 29); 117 width: 1px; 118 height: 150px; 119 /* transform: rotate(0deg); */ 120 transform-origin: 0.5px 130px; 121 border-radius: 5px; 122 position: absolute; 123 top: 20px; 124 } 125 </style> 126 </head> 127 128 <body> 129 <div class="wrapper"> 130 <div class="horologe"> 131 <div class="clock"></div> 132 <div class="shi"></div> 133 <div class="fen"></div> 134 <div class="miao"></div> 135 </div> 136 </div> 137 <script> 138 var horologe = document.getElementsByClassName("horologe")[0]; 139 // 时针 140 var shi = document.getElementsByClassName('shi')[0]; 141 // 分针 142 var fen = document.getElementsByClassName('fen')[0]; 143 // 秒针 144 var miao = document.getElementsByClassName('miao')[0]; 145 createScale() 146 // 调用 147 setInitTime(); 148 setInterval(function () { 149 var setDate = new Date(); 150 var seconds = setDate.getSeconds(); 151 var minutes = setDate.getMinutes(); 152 var hours = setDate.getHours(); 153 elapse(hours, minutes, seconds) 154 }, 1000); 155 function createScale() { 156 for (var i = 1; i <= 12; i++) { 157 var scale = document.createElement("div"); 158 scale.setAttribute('class', "scale"); 159 if (i == 12 || i == 3 || i == 6 || i == 9) { 160 // 3、6、9、12的刻度宽一点 161 scale.style.width = '10' + 'px'; 162 } 163 scale.style.transform = "rotate(" + (30 * i) + "deg) translateY(-142px)"; 164 //生成刻度 165 horologe.appendChild(scale) 166 } 167 } 168 // 初始时间 169 function setInitTime() { 170 // 获取当前时间 171 var date = new Date(); 172 // 获取当前时 173 var hours = date.getHours(); 174 // var hours = 12; 175 // 获取当前分 176 var minutes = date.getMinutes() 177 // var minutes = 10; 178 // 获取当前秒 179 var seconds = date.getSeconds(); 180 // var seconds = 30; 181 elapse(hours, minutes, seconds) 182 } 183 184 //时间在流逝，不曾停歇 185 function elapse(hours, minutes, seconds) { 186 // 时针 一小时走30deg 一分钟走0.5deg 一秒走0.1/12 deg; 十分钟分钟5度 187 // 分针 一小时走360deg 一分钟走6deg 一秒走 0.1deg 十分钟60度 速度是时针的12倍 188 // 秒针 一分钟走360deg 一分钟360deg 一秒走6deg 十分钟 3600deg 速度是分针的60倍 时针的720倍 189 shi.style.transform = "rotate(" + ((hours * 30) + ((minutes * 6) + seconds * (6 / 60)) / 12) + "deg)"; 190 fen.style.transform = "rotate(" + ((minutes * 6) + seconds * (6 / 60)) + "deg)"; 191 miao.style.transform = "rotate(" + (seconds * 6) + "deg)"; 192 } 193 </script> 194 </body> 195 196 </html>
效果在博客首页右上角↗↗↗