Skip to content
Permalink
Fetching contributors…
Cannot retrieve contributors at this time
142 lines (141 sloc) 5.13 KB
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Digital Clock</title>
<style>
* {
background-color: #222;
color: #999;
margin: 0;
padding: 20px;
text-align: center;
}
svg {
border: 1px solid #666;
}
circle {
fill: #b0ec13;
}
line {
stroke: #444444;
stroke-width: 10;
}
.lit {
stroke: #b0ec13;
}
</style>
</head>
<body>
<svg height="230" width="800" id="digital">
<rect fill="#222222" height="230" width="900" x="0" y="0" />
<circle cx="530" cy="70" r="8" />
<circle cx="530" cy="140" r="8" />
<circle cx="260" cy="70" r="8" />
<circle cx="260" cy="140" r="8" />
<g style="fill: none">
<line id="seg_0_0" x1="10" x2="110" y1="10" y2="10" />
<line id="seg_0_1" x1="10" x2="10" y1="10" y2="110" />
<line id="seg_0_2" x1="110" x2="110" y1="10" y2="110" />
<line id="seg_0_3" x1="10" x2="110" y1="110" y2="110" />
<line id="seg_0_4" x1="10" x2="10" y1="110" y2="210" />
<line id="seg_0_5" x1="110" x2="110" y1="110" y2="210" />
<line id="seg_0_6" x1="10" x2="110" y1="210" y2="210" />
</g>
<g style="fill: none">
<line id="seg_1_0" x1="140" x2="240" y1="10" y2="10" />
<line id="seg_1_1" x1="140" x2="140" y1="10" y2="110" />
<line id="seg_1_2" x1="240" x2="240" y1="10" y2="110" />
<line id="seg_1_3" x1="140" x2="240" y1="110" y2="110" />
<line id="seg_1_4" x1="140" x2="140" y1="110" y2="210" />
<line id="seg_1_5" x1="240" x2="240" y1="110" y2="210" />
<line id="seg_1_6" x1="140" x2="240" y1="210" y2="210" />
</g>
<g style="fill: none">
<line id="seg_2_0" x1="280" x2="380" y1="10" y2="10" />
<line id="seg_2_1" x1="280" x2="280" y1="10" y2="110" />
<line id="seg_2_2" x1="380" x2="380" y1="10" y2="110" />
<line id="seg_2_3" x1="280" x2="380" y1="110" y2="110" />
<line id="seg_2_4" x1="280" x2="280" y1="110" y2="210" />
<line id="seg_2_5" x1="380" x2="380" y1="110" y2="210" />
<line id="seg_2_6" x1="280" x2="380" y1="210" y2="210" />
</g>
<g style="fill: none">
<line id="seg_3_0" x1="410" x2="510" y1="10" y2="10" />
<line id="seg_3_1" x1="410" x2="410" y1="10" y2="110" />
<line id="seg_3_2" x1="510" x2="510" y1="10" y2="110" />
<line id="seg_3_3" x1="410" x2="510" y1="110" y2="110" />
<line id="seg_3_4" x1="410" x2="410" y1="110" y2="210" />
<line id="seg_3_5" x1="510" x2="510" y1="110" y2="210" />
<line id="seg_3_6" x1="410" x2="510" y1="210" y2="210" />
</g>
<g style="fill: none">
<line id="seg_4_0" x1="550" x2="650" y1="10" y2="10" />
<line id="seg_4_1" x1="550" x2="550" y1="10" y2="110" />
<line id="seg_4_2" x1="650" x2="650" y1="10" y2="110" />
<line id="seg_4_3" x1="550" x2="650" y1="110" y2="110" />
<line id="seg_4_4" x1="550" x2="550" y1="110" y2="210" />
<line id="seg_4_5" x1="650" x2="650" y1="110" y2="210" />
<line id="seg_4_6" x1="550" x2="650" y1="210" y2="210" />
</g>
<g style="fill: none">
<line id="seg_5_0" x1="680" x2="780" y1="10" y2="10" />
<line id="seg_5_1" x1="680" x2="680" y1="10" y2="110" />
<line id="seg_5_2" x1="780" x2="780" y1="10" y2="110" />
<line id="seg_5_3" x1="680" x2="780" y1="110" y2="110" />
<line id="seg_5_4" x1="680" x2="680" y1="110" y2="210" />
<line id="seg_5_5" x1="780" x2="780" y1="110" y2="210" />
<line id="seg_5_6" x1="680" x2="780" y1="210" y2="210" />
</g>
</svg>
<script>
function draw() {
let date = new Date();
let h = date.getHours();
let m = date.getMinutes();
let s = date.getSeconds();
h = h.toString().padStart(2, "0");
m = m.toString().padStart(2, "0");
s = s.toString().padStart(2, "0");
let hh = h.split("");
let mm = m.split("");
let ss = s.split("");
draw_segment(0, h[0]);
draw_segment(1, h[1]);
draw_segment(2, m[0]);
draw_segment(3, m[1]);
draw_segment(4, s[0]);
draw_segment(5, s[1]);
requestAnimationFrame(draw);
}
function draw_segment(display, number) {
let segments = [
[1, 1, 1, 0, 1, 1, 1],
[0, 0, 1, 0, 0, 1, 0],
[1, 0, 1, 1, 1, 0, 1],
[1, 0, 1, 1, 0, 1, 1],
[0, 1, 1, 1, 0, 1, 0],
[1, 1, 0, 1, 0, 1, 1],
[1, 1, 0, 1, 1, 1, 1],
[1, 0, 1, 0, 0, 1, 0],
[1, 1, 1, 1, 1, 1, 1],
[1, 1, 1, 1, 0, 1, 0]
];
for (let i = 0; i < 7; i++) {
let id = ["seg", display, i].join("_");
let el = document.getElementById(id);
let val = segments[number][i];
if (val === 1) {
el.classList.add("lit");
} else {
el.classList.remove("lit");
}
}
}
function load() {
requestAnimationFrame(draw);
}
window.onload = load;
</script>
</body>
</html>
You can’t perform that action at this time.