-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
89 lines (71 loc) · 2.26 KB
/
index.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
<!DOCTYPE html>
<html>
<head>
<title>Time</title>
</head>
<body>
<div id="inputs" style="float:right;">
<input type="text" id="from">
<input type="text" id="to">
<input type="button" onClick="setTimes(); return false;"
value="Update">
</div>
<br style="clear:both;" />
<div id="timenow" style="text-align:center; font-size: 200px; margin-top:
100px;"></div>
<div id="elapsed" style="width:150px; text-align:right; position:absolute;
bottom:10px; left:0;"></div>
<div id="bar" style="position:absolute; height: 20px; padding: 5px;
bottom: 5px; left: 160px; right: 160px; border: 1px solid #999;
overflow:hidden;">
<div id="inner" style="width: 0; background:#00c; height:
20px;"></div>
</div>
<div id="remaining" style="text-align:left; width: 150px;
position:absolute; bottom:10px; right:0;"></div>
<script type="text/javascript">
var txtTime = document.getElementById('timenow');
var txtElapsed = document.getElementById('elapsed');
var bar = document.getElementById('inner');
var txtRemain = document.getElementById('remaining');
var isTracking = false;
var testFrom, testTo, totalMinutes;
function setTimes() {
testFrom = Date.parse(document.getElementById('from').value);
testTo = Date.parse(document.getElementById('to').value);
isTracking = true;
totalMinutes = (testTo - testFrom) / 60 / 1000;
}
function update() {
var date = new Date();
var hours = date.getHours() % 12;
if (hours == 0) { hours = 12; }
var ampm = (date.getHours() < 12) ? 'AM' : 'PM';
var minutes = date.getMinutes();
if (minutes < 10) { minutes = '0' + minutes.toString(); }
var seconds = date.getSeconds();
if (seconds < 10) { seconds = '0' + seconds.toString(); }
txtTime.innerHTML = hours + ":" + minutes + ':' + seconds + " " +
ampm;
if (isTracking) {
elapsed = ((date - testFrom) / 1000 / 60);
txtElapsed.innerHTML = elapsed.toFixed(0);
remaining = ((testTo - date) / 1000 / 60);
txtRemain.innerHTML = remaining.toFixed(0);
width = 100 * (elapsed / totalMinutes).toFixed(4);
if (width >= 100) {
width = 100;
bar.style.background = "#f00";
} else if (width > 95) {
bar.style.background = "#ff0";
} else {
bar.style.background = "#66f";
}
bar.style.width = width + '%';
}
setTimeout(update, 1000);
}
update();
</script>
</body>
</html>