Untitled

 avatar
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