CSS + JS 实现时钟
snail111 次
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: '微软雅黑', sans-serif; } body { min-height: 100vh; background-color: #091921; display: flex; align-items: center; justify-content: center; } .clock { display: flex; justify-content: center; align-items: center; width: 400px; height: 400px; background: url('/clock.png'); background-size: cover; border-radius: 50%; border: 3px solid #091921; box-shadow: 0 -15px 15px rgba(255, 255, 255, 0.05), inset 0 -15px 15px rgba(255, 255, 255, 0.05), 0 15px 15px rgba(0, 0, 0, 0.1), inset 0 15px 15px rgba(0, 0, 0, 0.1); } .clock::before { content: ''; position: absolute; width: 15px; height: 15px; border-radius: 50%; background-color: #fff; z-index: 999; } .hour, .min, .second { position: absolute; } .hour, .hr { width: 160px; height: 160px; } .min, .mn { width: 190px; height: 190px; } .second, .sc { width: 230px; height: 230px; } .hr, .mn, .sc { display: flex; justify-content: center; position: absolute; border-radius: 50%; } .hr::before { content: ''; position: absolute; width: 8px; height: 80px; z-index: 10; background-color: #99ffcc; border-radius: 6px 6px 0 0; } .mn::before { content: ''; position: absolute; width: 4px; height: 100px; z-index: 11; background-color: #9fc; border-radius: 6px 6px 0 0; } .sc::before { content: ''; position: absolute; width: 2px; height: 150px; z-index: 12; background-color: #9fc; border-radius: 6px 6px 0 0; } </style> <body> <div class="clock"> <div class="hour"> <div class="hr"></div> </div> <div class="min"> <div class="mn"></div> </div> <div class="second"> <div class="sc"></div> </div> </div> <script> var deg = 6; var hr = document.querySelector('.hr'); var mn = document.querySelector('.mn'); var sc = document.querySelector('.sc'); setInterval(() => { var time = new Date(); var hh = time.getHours() * 30; var mm = time.getMinutes() * deg; var ss = time.getSeconds() * deg; hr.style.transform = `rotateZ(${(hh) + (mm/12)}deg)`; mn.style.transform = `rotate(${(mm)}deg)`; sc.style.transform = `rotate(${(ss)}deg)`; }, 1000); </script> </body> </html>
评论 | 0 条评论