functional > imperative

master
Lukáš Hozda 4 years ago
parent d49af06758
commit 65ea0bf209

@ -18,68 +18,22 @@
</head>
<body>
<div>
T &dash; <input type="text" id="time" size="11" placeholder="hh : mm : ss">
T &dash; <input type="text" id="time" size="12" placeholder="hh : mm : ss">
</div>
<script>
var input = document.getElementById('time');
var submit = document.getElementById('submit');
var seconds = 0;
var interval; // variable holding setInterval
input.addEventListener("keyup", function(event) {
if (event.keyCode === 13) {
event.preventDefault();
if (!getTime(input)) {
input.blur();
startCounter();
}
}
});
function getTime(input){
var hms = input.value;
var t = hms.split(':');
if (t.length == 3) {
seconds = (+t[0]) * 60 * 60 + (+t[1]) * 60 + (+t[2]);
} else {
seconds = (+t[0]) * 60 + (+t[1]);
}
if (isNaN(seconds)) {
console.log('input is NaN');
return 1;
}
console.log('time set to '+seconds+' seconds');
return 0;
}
function setPageTime(){
var h = Math.floor(seconds / 3600);
var m = Math.floor((seconds % 3600) / 60);
var s = seconds % 60;
var strtime = h+' : '+m+' : '+s;
console.log(strtime);
input.value = strtime;
}
function startCounter(){
console.log('counting down');
interval = window.setInterval(countdown, 1000);
}
function stopCounter(){
clearInterval(interval);
}
function countdown(){
seconds = seconds - 1;
setPageTime();
if (seconds == 0) {
stopCounter();
console.log('timer at 0');
}
}
((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,
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>

Loading…
Cancel
Save