/
script.js
58 lines (49 loc) · 1.22 KB
/
script.js
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
// options
var blockLength = 10;
var dayLength = 24;
// how many blocks in a day (defined in options)
var totalBlocks = (dayLength * 60) / blockLength
// get the div I want to put elements into
var clock = document.getElementById('clock');
// get the time
var time = getTime();
// draw the blocks once
drawBlocks();
// update the clock every second
setInterval(function() {
time = getTime();
updateBlocks(time);
console.log(time)
}, 1000)
// get the current time
function getTime() {
var date = new Date();
var hours = date.getHours();
var mins = date.getMinutes();
// work out what ten min block we're in right now
var currentBlock = (mins + (hours * 60)) / blockLength;
return currentBlock;
}
function drawBlocks() {
// for each block run some code
for (var i = 0; i < totalBlocks; i++) {
// create a div,
var div = document.createElement("div");
updateBlock(div, i)
// draw this div in the clock div
clock.appendChild(div);
}
}
function updateBlock(div, i) {
if (i <= time-1) {
div.style.opacity = "0.2";
} else {
div.style.opacity = "1";
}
}
function updateBlocks(time) {
for (var i = 0; i < totalBlocks; i++) {
var div = clock.childNodes[i];
updateBlock(div, i);
}
}