Untitled
unknown
plain_text
6 months ago
1.3 kB
1
Indexable
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clock with Timing Event</title>
<style>
body { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; font-family: Arial, sans-serif; background-color: #f0f0f0; }
#clock { font-size: 48px; margin-bottom: 20px; }
#message { margin-top: 20px; font-size: 24px; color: green; }
</style>
</head>
<body>
<div id="clock">00:00:00</div>
<button id="startButton">Start Timing Event</button>
<div id="message"></div>
<script>
const updateClock = () => {
const now = new Date();
document.getElementById('clock').innerText =
[now.getHours(), now.getMinutes(), now.getSeconds()].map(n => String(n).padStart(2, '0')).join(':');
};
document.getElementById('startButton').onclick = () => {
document.getElementById('message').innerText = 'Timer started! Wait for 10 seconds...';
setTimeout(() => document.getElementById('message').innerText = '10 seconds have passed!', 10000);
};
setInterval(updateClock, 1000); updateClock();
</script>
</body>
</html>
Editor is loading...
Leave a Comment