-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtimer.html
127 lines (119 loc) · 4.36 KB
/
timer.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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<html>
<head>
<title>Timer/Alarm With Milliseconds</title>
<style>
.number {
font-size: 32px;
}
.t {
display: table;
}
.tr {
display: table-row;
}
.td {
display: table-cell;
}
.pad {
margin: 20px;
}
</style>
</head>
<body>
<div class="t">
<div class="tr">
<input id="hour" type="text" class="number td" value="0" maxlength="2" size="2"></input>
<span class="number td">:</span>
<input id="minute" type="text" class="number td" value="0" maxlength="2" size="2"></input>
<span class="number td">:</span>
<input id="second" type="text" class="number td" value="4" maxlength="2" size="2"></input>
<span class="number td">:</span>
<input id="millisecond" type="text" class="number td" value="800" maxlength="3" size="3"></input>
</div>
<div class="tr">
<span class="number td">H</span>
<span class="number td">:</span>
<span class="number td">M</span>
<span class="number td">:</span>
<span class="number td">S</span>
<span class="number td">:</span>
<span class="number td">MS</span>
</div>
</div>
<div class="pad">
<button id="startButton">Start</button>
<button id="stopButton">Stop</button>
</div>
<div>
<audio id="beepAudio" src="media/beep.wav" controls>Couldn't load countdown beep</audio>
Countdown beep
</div>
<div>
<audio id="alarmAudio" src="media/alarm.wav" controls>Couldn't load alarm</audio>
Alarm
</div
</body>
<script>
document.getElementById("beepAudio").volume = 0.3;
document.getElementById("alarmAudio").volume = 0.3;
class TimerObj {
interval = null; //Reference to the return value from set interval later used to clear the interval
hourIn = 0; //Used to save the hours input when the timer is started
minuteIn = 0;
secondIn = 0;
millisecondIn = 0;
startTime = Date.now(); //Used to save current time when timer is started
startDate = new Date(); //Used to save a date with the time set to whatever is set in the timer input
millisInTimer = 0; //Technically could be calculated each time, but just calculate once and save
countdownBeeps = []; //Saves the milliseconds until finish of when the beeps should occur and whether they've occured yet
hourInput = 1;
constructor(){
this.hourInput = document.getElementById("hour");
this.minuteInput = document.getElementById("minute");
this.secondInput = document.getElementById("second");
this.millisecondInput = document.getElementById("millisecond");
this.beep = document.getElementById("beepAudio");
this.alarm = document.getElementById("alarmAudio");
}
updateTimer = (curDate) => {
this.hourInput.value = curDate.getHours();
this.minuteInput.value = curDate.getMinutes();
this.secondInput.value = curDate.getSeconds();
this.millisecondInput.value = curDate.getMilliseconds();
}
start = () => {
this.startTime = Date.now();
this.hourIn = this.hourInput.value;
this.minuteIn = this.minuteInput.value;
this.secondIn = this.secondInput.value;
this.millisecondIn = this.millisecondInput.value;
this.startDate = new Date(1999, 11, 31, this.hourIn, this.minuteIn, this.secondIn, this.millisecondIn);
this.millisInTimer = this.startDate - new Date("December 31, 1999");
this.interval = window.setInterval(this.update, 1);
this.countdownBeeps = [[this.millisInTimer - 5000, (5000>this.millisInTimer)?1:0], [this.millisInTimer - 4000, (4000>this.millisInTimer)?1:0], [this.millisInTimer - 3000, (3000>this.millisInTimer)?1:0], [this.millisInTimer - 2000, (2000>this.millisInTimer)?1:0], [this.millisInTimer - 1000, (1000>this.millisInTimer)?1:0]]
}
update = () => {
let passed = Date.now() - this.startTime;
let curDate = new Date(this.startDate - passed);
this.updateTimer(curDate);
for(let arr of this.countdownBeeps){
if((passed > arr[0]) && (arr[1] == 0)){
this.beep.play();
arr[1] = 1;
}
}
if(passed >= this.millisInTimer){
this.alarm.play();
this.stop();
this.updateTimer(this.startDate);
}
}
stop = () => {
window.clearInterval(this.interval); this.interval = null;
}
}
let timerObj = new TimerObj();
document.getElementById("startButton").addEventListener("mousedown", timerObj.start);
document.getElementById("stopButton").addEventListener("mousedown", timerObj.stop);
</script>
</html>