-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
108 lines (102 loc) · 3.09 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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Binary Clock</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="main">
<h1>Binary Clock</h1>
<div id="binary-clock">
<div id="hours">
<div class="bin bin-1 circle"></div>
<div class="bin bin-2 circle"></div>
<div class="bin bin-3 circle"></div>
<div class="bin bin-4 circle"></div>
<div class="bin bin-5 circle"></div>
<div class="bin bin-6 circle"></div>
</div>
<div id="minutes">
<div class="bin bin-1 circle"></div>
<div class="bin bin-2 circle"></div>
<div class="bin bin-3 circle"></div>
<div class="bin bin-4 circle"></div>
<div class="bin bin-5 circle"></div>
<div class="bin bin-6 circle"></div>
</div>
<div id="seconds">
<div class="bin bin-1 circle"></div>
<div class="bin bin-2 circle"></div>
<div class="bin bin-3 circle"></div>
<div class="bin bin-4 circle"></div>
<div class="bin bin-5 circle"></div>
<div class="bin bin-6 circle"></div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
var state = '1';
function startBinarClock() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
h = h.toString(2);
m = m.toString(2);
s = s.toString(2);
var t = [h,m,s];
for (var i = 0; i < t.length; i++) {
var z = 6 - t[i].length;
for (var j = 0; j < z; j++) {
t[i] = "0" + t[i];
}
}
var hours = document.getElementById('hours');
var hrsCirc = hours.getElementsByClassName('circle');
var minutes = document.getElementById('minutes');
var minCirc = minutes.getElementsByClassName('circle');
var seconds = document.getElementById('seconds');
var secCirc = seconds.getElementsByClassName('circle');
for (var i = 1; i < 7; i++) {
if (t[2][i-1] == '1') {
secCirc[i-1].style.backgroundColor = '#ADFF2F';
// hrsCirc[0].style.backgroundColor = 'red';
} else {
secCirc[i-1].style.backgroundColor = '#006400';
// hrsCirc[0].style.backgroundColor = '#DC143C';
}
if (t[1][i-1] == '1') {
minCirc[i-1].style.backgroundColor = '#ADFF2F';
} else {
minCirc[i-1].style.backgroundColor = '#006400';
}
if (t[0][i-1] == '1') {
hrsCirc[i-1].style.backgroundColor = '#ADFF2F';
} else {
hrsCirc[i-1].style.backgroundColor = '#006400';
}
// hrsCirc[0].style.backgroundColor = 'red';
}
cur = t[2][5];
if (state !== cur) {
hrsCirc[0].style.backgroundColor = 'red';
v = setTimeout(function() {
hrsCirc[0].style.backgroundColor = '#DC143C';
},250);
state = cur;
} else {
hrsCirc[0].style.backgroundColor = '#DC143C';
}
t = setTimeout(function () {
startBinarClock();
}, 500);
}
function tick(cur) {
}
window.onload = function() {
startBinarClock();
}
</script>
</html>