Permalink
@@ -0,0 +1,59 @@ | ||
<!DOCTYPE html> | ||
<html lang="en-US"> | ||
<head> | ||
<meta charset="utf-8"> | ||
<title>Simple setInterval clock</title> | ||
<style> | ||
p { | ||
font-family: sans-serif; | ||
} | ||
</style> | ||
</head> | ||
<body> | ||
<p class="clock">0</p> | ||
<button id="start">Start</button> | ||
<button id="stop">Stop</button> | ||
<button id="reset" disabled>Reset</button> | ||
<script> | ||
let seconds = 0; | ||
let counting = false; | ||
let startButton = document.querySelector('#start'); | ||
let stopButton = document.querySelector('#stop'); | ||
let resetButton = document.querySelector('#reset'); | ||
startButton.addEventListener('click', start); | ||
stopButton.addEventListener('click', stop) | ||
resetButton.addEventListener('click', reset) | ||
let startWatch; | ||
function displayTime() { | ||
let date = new Date(); | ||
let time = date.toLocaleTimeString(); | ||
document.querySelector('.clock').textContent = seconds; | ||
} | ||
function start() { | ||
if (!counting) { | ||
startWatch = setInterval(function() { | ||
seconds++; | ||
document.querySelector('.clock').innerHTML = seconds; | ||
}, 1000); | ||
counting = true; | ||
startButton.disabled = true; | ||
} | ||
} | ||
function stop() { | ||
clearInterval(startWatch); | ||
counting = false; | ||
resetButton.disabled = false; | ||
startButton.disabled = false; | ||
} | ||
|
||
function reset() { | ||
clearInterval(startWatch); | ||
counting = false; | ||
seconds = 0; | ||
document.querySelector('.clock').textContent = seconds; | ||
startButton.disabled = false; | ||
resetButton.disabled = true; | ||
} | ||
</script> | ||
</body> | ||
</html> |