Untitled
unknown
plain_text
6 months ago
2.3 kB
4
Indexable
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Analog Watch</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="watch-container"> <div class="watch-face"> <div class="hour-hand" id="hour-hand"></div> <div class="minute-hand" id="minute-hand"></div> <div class="second-hand" id="second-hand"></div> </div> </div> <script src="script.js"></script> </body> </html> ``` *CSS (in style.css file)* ``` body { background-color: #f0f0f0; } .watch-container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .watch-face { width: 200px; height: 200px; border-radius: 50%; background-color: #fff; border: 1px solid #ddd; position: relative; } .hour-hand, .minute-hand, .second-hand { position: absolute; top: 50%; left: 50%; transform-origin: top center; } .hour-hand { width: 5px; height: 50px; background-color: #333; transform: rotate(0deg); } .minute-hand { width: 3px; height: 80px; background-color: #666; transform: rotate(0deg); } .second-hand { width: 1px; height: 100px; background-color: #f00; transform: rotate(0deg); } ``` *JavaScript (in script.js file)* ``` const hourHand = document.getElementById('hour-hand'); const minuteHand = document.getElementById('minute-hand'); const secondHand = document.getElementById('second-hand'); function updateClock() { const now = new Date(); const hours = now.getHours(); const minutes = now.getMinutes(); const seconds = now.getSeconds(); const hourAngle = (hours * 30) + (minutes * 0.5); const minuteAngle = (minutes * 6) + (seconds * 0.1); const secondAngle = (seconds * 6); hourHand.style.transform = `rotate(${hourAngle}deg)`; minuteHand.style.transform = `rotate(${minuteAngle}deg)`; secondHand.style.transform = `rotate(${secondAngle}deg)`; } setInterval(updateClock, 1000); ```
Editor is loading...
Leave a Comment