Skip to content

Instantly share code, notes, and snippets.

@addam

addam/timer.html

Created February 19, 2022 09:52
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save addam/c33945aa838af7823fb24f7484547caf to your computer and use it in GitHub Desktop.
Save addam/c33945aa838af7823fb24f7484547caf to your computer and use it in GitHub Desktop.
Download ZIP
simple countdown timer on local webpage
Raw
timer.html
<html>
<meta charset=utf-8>
<title>Timer</title>
<style>
@keyframes blinker {
50% {
opacity: 0;
}
}
body {
font-family: sans-serif;
background: #475C66;
color: #FFF8E1;
width: 98vw;
height: 98vh;
display: flex;
flex-flow: column;
align-items: center;
justify-content: space-evenly;
}
h1 {
font-size: 1500%;
text-align: center;
margin: 0;
}
h1:focus {
color: #ddF8E1;
}
.blink {
animation: blinker 0.5s linear 60;
}
</style>
<script>
var handle = null;
function setTimer() {
if (handle !== null) {
clearInterval(handle);
handle = null;
} else {
updateTimer();
handle = setInterval(updateTimer, 1000);
}
}
function clearTimer() {
clearInterval(handle);
handle = null;
timer.classList.remove("blink")
}
function updateTimer() {
const [_, mins, secs] = timer.textContent.match(/(.*):(.*)/)
const duration = Number(secs) + 60 * Number(mins) - 1;
if (duration >= 0) {
timer.textContent = `${Math.floor(duration / 60)}:${zerofill(duration % 60)}`
} else {
clearTimer()
timer.classList.add("blink")
}
}
function zerofill(num) {
return (num < 10) ? "0" + num : num;
}
</script>
<body>
<h1 contenteditable=true>Heading</h1>
<h1 contenteditable=true onfocus="clearTimer()" onblur="setTimer()" id=timer>5:00</h1>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment