Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
59 lines (58 sloc) 1.7 KB
<!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>
You can’t perform that action at this time.