Untitled
unknown
plain_text
a year ago
2.3 kB
12
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