1 <!DOCTYPE html> 2 3 <html lang="en"> 4 5 <head> 6 7 <meta charset="GBK"> 8 9 <title>html圆形时钟模拟</title> 10 11 <style> 12 13 html{ 14 15 background: #000; 16 17 color: #666; 18 19 font-size: 12px; 20 21 overflow:hidden; 22 23 } 24 25 *{ 26 27 margin: 0; 28 29 padding: 0; 30 31 } 32 33 span{ 34 35 display: block; 36 37 float: left; 38 39 } 40 41 .on{ 42 43 color: #fff; 44 45 } 46 47 .wrapper{ 48 49 width: 200px; 50 51 height: 200px; 52 53 position: absolute; 54 55 left:50%; 56 57 top:50%; 58 59 margin-top: -100px; 60 61 margin-left: -100px; 62 63 } 64 65 .wrapper .timebox{ 66 67 position: absolute; 68 69 width: 200px; 70 71 height: 200px; 72 73 top: 0; 74 75 left:0; 76 77 border-radius: 100%; 78 79 transition: all 0.5s; 80 81 } 82 83 .timebox span{ 84 85 transition: all 0.5s; 86 87 float: left; 88 89 } 90 91 .wrapper .timebox span{ 92 93 position: absolute; 94 95 left:50%; 96 97 top:50%; 98 99 width: 40px; 100 101 height: 18px; 102 103 margin-top: -9px; 104 105 margin-left: -20px; 106 107 text-align: right; 108 109 } 110 111 </style> 112 113 </head> 114 115 <body> 116 117 <div id="wrapper"> 118 119 <div class="timebox yuebox" id="yueBox"></div> 120 121 <div class="timebox riqiBox" id="riqiBox"></div> 122 123 <div class="timebox hourbox" id="hourbox"></div> 124 125 <div class="timebox minutebox" id="minutebox"></div> 126 127 <div class="timebox secondbox" id="secondbox"></div> 128 129 </div> 130 131 132 133 <script> 134 135 let wrapper = document.getElementById("wrapper"); 136 137 let yueBox = document.getElementById("yueBox"); 138 139 let riqiBox = document.getElementById("riqiBox"); 140 141 let hourbox = document.getElementById("hourbox"); 142 143 let minutebox = document.getElementById("minutebox"); 144 145 let secondbox = document.getElementById("secondbox"); 146 147 /* 148 149 * 找所有的东西标签函数 150 151 * */ 152 153 let findSiblings = function( tag ){ 154 155 let parent = tag.parentNode; 156 157 let childs = parent.children; 158 159 let sb = []; 160 161 for(let i=0 ; i <= childs.length-1 ; i++){ 162 163 if( childs[i]!==tag){ 164 165 sb[sb.length] = childs[i]; 166 167 } 168 169 } 170 171 return sb ; 172 173 }; 174 175 /* 176 177 * 去掉所有兄弟的类 178 179 * */ 180 181 let removeSiblingClass =function( tag ){ 182 183 let sb = findSiblings( tag ); 184 185 for(let i=0 ; i <= sb.length-1 ; i++){ 186 187 sb[i].className = ""; 188 189 } 190 191 }; 192 193 /* 194 195 * 初始化月份函数 196 197 * */ 198 199 let initMonth = function(){ 200 201 for(let i=1; i<=12; i++){ 202 203 let span = document.createElement("span"); 204 205 span.innerHTML = i+"月"; 206 207 yueBox.appendChild( span ); 208 209 } 210 211 }; 212 213 // 初始化日期 214 215 let initDate = function(){ 216 217 for(let i=1; i<=31; i++){ 218 219 let span = document.createElement("span"); 220 221 span.innerHTML = i+"日"; 222 223 riqiBox.appendChild( span ); 224 225 } 226 227 }; 228 229 // 初始化小时，分钟，秒 230 231 let initHour = function(){ 232 233 for(let i=0; i<=23; i++){ 234 235 let h = i ; 236 237 let span = document.createElement("span"); 238 239 if( h<10){ 240 241 h="0"+h; 242 243 } 244 245 span.innerHTML = h +"点"; 246 247 hourbox.appendChild( span ); 248 249 } 250 251 }; 252 253 let initMinute = function(){ 254 255 for(let i=0; i<=59; i++){ 256 257 let f = i ; 258 259 let span = document.createElement("span"); 260 261 if( f<10){ 262 263 f="0"+f; 264 265 } 266 267 span.innerHTML = f +"分"; 268 269 minutebox.appendChild( span ); 270 271 } 272 273 }; 274 275 let initSecond = function(){ 276 277 for(let i=0; i<=59; i++){ 278 279 let miao = i ; 280 281 let span = document.createElement("span"); 282 283 if( miao<10){ 284 285 miao="0"+miao; 286 287 } 288 289 span.innerHTML = miao +"秒"; 290 291 secondbox.appendChild( span ); 292 293 } 294 295 }; 296 297 // 时间文字样式切换函数 298 299 let changeTime = function(tag){ 300 301 tag.className = "on"; 302 303 removeSiblingClass( tag ); 304 305 }; 306 307 /* 308 309 * 初始化日历函数 310 311 * */ 312 313 let initRili = function(){ 314 315 initMonth(); // 初始化月份 316 317 initDate(); // 初始化日期 318 319 initHour(); // 小时 320 321 initMinute(); 322 323 initSecond(); 324 325 }; 326 327 /* 328 329 * 展示当前时间 330 331 * 参数：mydate 时间对象 332 333 * */ 334 335 let showNow = function( mydate ){ 336 337 let yue = mydate.getMonth() ; 338 339 let riqi = mydate.getDate(); 340 341 let hour = mydate.getHours() ; 342 343 let minute = mydate.getMinutes(); 344 345 let second = mydate.getSeconds(); 346 347 // 时间文字样式切换函数 348 349 changeTime( yueBox.children[yue] ); 350 351 changeTime( riqiBox.children[riqi-1] ); 352 353 changeTime( hourbox.children[hour] ); 354 355 changeTime( minutebox.children[minute] ); 356 357 changeTime( secondbox.children[second] ); 358 359 }; 360 361 // 展示时间圆圈函数 362 363 // tag：目标 364 365 // num：数字数量 366 367 // dis：圆圈半径 368 369 let textRound = function(tag,num,dis){ 370 371 let span = tag.children ; 372 373 for(let i=0 ; i<=span.length-1; i++){ 374 375 span[i].style.transform="rotate("+ (360/span.length)*i+"deg) translateX("+dis+"px)" ; 376 377 } 378 379 }; 380 381 /* 382 383 * 旋转指定“圆圈”指定度数 384 385 * */ 386 387 let rotateTag = function(tag , deg){ 388 389 tag.style.transform = "rotate("+deg+"deg)"; 390 391 }; 392 393 let main = function(){ 394 395 initRili(); // 初始化日历 396 397 setInterval(function(){ 398 399 let mydate = new Date(); 400 401 showNow( mydate ); // 展示当前时间 402 403 },1000); 404 405 // n秒后，摆出圆形 406 407 setTimeout(function(){ 408 409 wrapper.className = "wrapper"; 410 411 textRound(yueBox,12,40); 412 413 textRound(riqiBox,31,80); 414 415 textRound(hourbox,24,120); 416 417 textRound(minutebox,60,160); 418 419 textRound(secondbox,60,200); 420 421 setInterval(function(){ 422 423 let mydate = new Date(); 424 425 rotateTag( yueBox , -30*mydate.getMonth()); 426 427 rotateTag( riqiBox , -360/31*(mydate.getDate()-1) ); 428 429 rotateTag( hourbox , -360/24*mydate.getHours()); 430 431 rotateTag( minutebox , -6*mydate.getMinutes()); 432 433 rotateTag( secondbox , -6*mydate.getSeconds()); 434 435 },1000) 436 437 },100) 438 439 }; 440 441 main(); 442 443 </script> 444 <p><a href="https://www.ygxinjian.com" alt="ygxinjian" target="_blank">ygxinjian</a></p> 445 </body> 446 447 </html>