|
|
|
|
<!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 ‐ <input type="text" id="time" size="12" 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>
|
