|
|
|
|
<!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:3em; 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="11" placeholder="hh : mm : ss">
|
|
|
|
|
</div>
|
|
|
|
|
<script>
|
|
|
|
|
var input = document.getElementById('time');
|
|
|
|
|
var submit = document.getElementById('submit');
|
|
|
|
|
var seconds = 0;
|
|
|
|
|
var interval; // varibale 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');
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
