forked from bistools/bistools.github.io
-
Notifications
You must be signed in to change notification settings - Fork 0
/
timers.html
103 lines (91 loc) · 1.96 KB
/
timers.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<html>
<head>
<style>
button{
width:200px;
height:100px;
font-size:32px;
}
.warning{
color:red;
}
h1{
font-size:48px;
}
</style>
<script>
//let sound = new Audio('rooster.mp3');
let ele,butt;
document.addEventListener("DOMContentLoaded", function(){
ele = document.getElementById("timer");
ele.innerHTML = formatTimestamp(tbs);
butt = document.getElementById("butt");
});
let tbs = 3.5*60*1000;
let jad_adds = 1.75*60*1000;
let warn_at = 10*1000;
let start = null;
let pause = null;
let resume = null;
let sint;
function progress(){
if(start==null){
start = Date.now();
butt.innerHTML = "Pause";
sint = setInterval(tick,50);
}else if(pause==null){
pause = Date.now();
butt.innerHTML = "Resume";
}else if(resume==null){
resume = Date.now();
butt.innerHTML = "Reset";
}else{
start = pause = resume = null;
butt.innerHTML = "Start";
ele.innerHTML = formatTimestamp(tbs);
clearInterval(sint);
}
}
function formatTimestamp(timestamp){
let min = Math.floor(timestamp/60000);
let sec = Math.floor((timestamp%60000)/1000);
let mil = timestamp%1000;
min = min.toString().padStart(2,"0");
sec = sec.toString().padStart(2,"0");
mil = mil.toString().padStart(2,"0").substring(0,2);
return min+":"+sec+":"+mil;
}
function tick(){
let tts = 0;
if(pause){
let pre_elap = pause - start;
tts = tbs - (pre_elap % tbs) + jad_adds;
}else{
let pre_elap = Date.now() - start;
tts = tbs - (pre_elap % tbs);
}
if(resume){
let post_elap = Date.now() - resume;
if(post_elap>tts){
tts = tbs - ((post_elap-tts)%tbs)
}else{
tts = tts - post_elap;
}
}
if(tts<warn_at){
if(!ele.classList.contains("warning")){
ele.classList.add("warning")
// sound.play();
}
}else{
ele.classList.remove("warning");
}
ele.innerHTML = formatTimestamp(tts);
}
</script>
</head>
<body>
<h1 id="timer"></h1>
<button id="butt" onclick="progress()">Start</button>
</body>
</html>