You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

41 lines
1.0 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TIMER</title>
<style>
body {
display:flex; align-items:center; justify-content:center;
min-height:100vh; margin:0;
font-size:6em; font-family:monospace;
}
input {
padding:0; border:0; outline:none; background:none;
font-size:inherit; font-family:monospace;
}
</style>
</head>
<body>
<div>
T &minus; <input type="text" id="time" size="8" placeholder="hh:mm:ss">
</div>
<script>
((t = document.querySelector("#time"), on = false, tmr = undefined) =>
t.addEventListener(
"keyup",
(e, s = t.value.split(':').reduce((a, x) => (60 * a) + +x)) => e.keyCode == 13 && !on
? (
on = true,
t.blur(),
tmr = setInterval(() => s == 0
? (on = false, clearInterval(tmr), t.value = "")
: t.value = (new Date(s-- * 1000)).toISOString().substr(11, 8).replace(/:/g, ':'), 1000)
)
: 0
)
)()
</script>
</body>
</html>