아래와 같은 디지털시계를 Javascript와 SVG를 이용해서 만들어보자.
※ HTML 소스
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="time1">
<svg width="96" height="160" viewBox="-1 -1 12 20">
<polygon fill="#F00" points="1, 1 2, 0 8, 0 9, 1 8, 2 2, 2"/>
<polygon fill="#F00" points="9, 1 10, 2 10, 8 9, 9 8, 8 8, 2"/>
<polygon fill="#F00" points="9, 9 10,10 10,16 9,17 8,16 8,10"/>
<polygon fill="#F00" points="9,17 8,18 2,18 1,17 2,16 8,16"/>
<polygon fill="#F00" points="1,17 0,16 0,10 1, 9 2,10 2,16"/>
<polygon fill="#F00" points="1, 9 0, 8 0, 2 1, 1 2, 2 2, 8"/>
<polygon fill="#F00" points="1, 9 2, 8 8, 8 9, 9 8,10 2,10"/>
</svg>
<svg width="96" height="160" viewBox="-1 -1 12 20">
<polygon fill="#F00" points="1, 1 2, 0 8, 0 9, 1 8, 2 2, 2"/>
<polygon fill="#F00" points="9, 1 10, 2 10, 8 9, 9 8, 8 8, 2"/>
<polygon fill="#F00" points="9, 9 10,10 10,16 9,17 8,16 8,10"/>
<polygon fill="#F00" points="9,17 8,18 2,18 1,17 2,16 8,16"/>
<polygon fill="#F00" points="1,17 0,16 0,10 1, 9 2,10 2,16"/>
<polygon fill="#F00" points="1, 9 0, 8 0, 2 1, 1 2, 2 2, 8"/>
<polygon fill="#F00" points="1, 9 2, 8 8, 8 9, 9 8,10 2,10"/>
</svg>
<svg width="20" height="160" viewBox="-1 -1 2 20" fill="#F00">
<circle cx="0" cy="6" r="1" />
<circle cx="0" cy="12" r="1" />
</svg>
<svg width="96" height="160" viewBox="-1 -1 12 20">
<polygon fill="#F00" points="1, 1 2, 0 8, 0 9, 1 8, 2 2, 2"/>
<polygon fill="#F00" points="9, 1 10, 2 10, 8 9, 9 8, 8 8, 2"/>
<polygon fill="#F00" points="9, 9 10,10 10,16 9,17 8,16 8,10"/>
<polygon fill="#F00" points="9,17 8,18 2,18 1,17 2,16 8,16"/>
<polygon fill="#F00" points="1,17 0,16 0,10 1, 9 2,10 2,16"/>
<polygon fill="#F00" points="1, 9 0, 8 0, 2 1, 1 2, 2 2, 8"/>
<polygon fill="#F00" points="1, 9 2, 8 8, 8 9, 9 8,10 2,10"/>
</svg>
<svg width="96" height="160" viewBox="-1 -1 12 20">
<polygon fill="#F00" points="1, 1 2, 0 8, 0 9, 1 8, 2 2, 2"/>
<polygon fill="#F00" points="9, 1 10, 2 10, 8 9, 9 8, 8 8, 2"/>
<polygon fill="#F00" points="9, 9 10,10 10,16 9,17 8,16 8,10"/>
<polygon fill="#F00" points="9,17 8,18 2,18 1,17 2,16 8,16"/>
<polygon fill="#F00" points="1,17 0,16 0,10 1, 9 2,10 2,16"/>
<polygon fill="#F00" points="1, 9 0, 8 0, 2 1, 1 2, 2 2, 8"/>
<polygon fill="#F00" points="1, 9 2, 8 8, 8 9, 9 8,10 2,10"/>
</svg>
<svg width="20" height="160" viewBox="-1 -1 2 20" fill="#F00">
<circle cx="0" cy="6" r="1" />
<circle cx="0" cy="12" r="1" />
</svg>
<svg width="96" height="160" viewBox="-1 -1 12 20">
<polygon fill="#F00" points="1, 1 2, 0 8, 0 9, 1 8, 2 2, 2"/>
<polygon fill="#F00" points="9, 1 10, 2 10, 8 9, 9 8, 8 8, 2"/>
<polygon fill="#F00" points="9, 9 10,10 10,16 9,17 8,16 8,10"/>
<polygon fill="#F00" points="9,17 8,18 2,18 1,17 2,16 8,16"/>
<polygon fill="#F00" points="1,17 0,16 0,10 1, 9 2,10 2,16"/>
<polygon fill="#F00" points="1, 9 0, 8 0, 2 1, 1 2, 2 2, 8"/>
<polygon fill="#F00" points="1, 9 2, 8 8, 8 9, 9 8,10 2,10"/>
</svg>
<svg width="96" height="160" viewBox="-1 -1 12 20">
<polygon fill="#F00" points="1, 1 2, 0 8, 0 9, 1 8, 2 2, 2"/>
<polygon fill="#F00" points="9, 1 10, 2 10, 8 9, 9 8, 8 8, 2"/>
<polygon fill="#F00" points="9, 9 10,10 10,16 9,17 8,16 8,10"/>
<polygon fill="#F00" points="9,17 8,18 2,18 1,17 2,16 8,16"/>
<polygon fill="#F00" points="1,17 0,16 0,10 1, 9 2,10 2,16"/>
<polygon fill="#F00" points="1, 9 0, 8 0, 2 1, 1 2, 2 2, 8"/>
<polygon fill="#F00" points="1, 9 2, 8 8, 8 9, 9 8,10 2,10"/>
</svg>
</div>
<script>
let time1 = document.querySelectorAll("#time1 svg > polygon");
let fndA = [ 0x7e, 0x30, 0x6d, 0x79, 0x33, 0x5b, 0x5f,0x70, 0x7f, 0x7b];
function fnd(pos, num) {
let loc = pos * 7;
for (let bit = 0; bit < 7; bit++) {
time1[loc + bit].style.fill = (fndA[num] & (2 ** (6 - bit))) ? "#F00" : "#F001";
}
}
setInterval(() => {
let date = new Date();
let hh = date.getHours();
let mm = date.getMinutes();
let ss = date.getSeconds();
fnd(0, Math.floor(hh / 10));
fnd(1, hh % 10);
fnd(2, Math.floor(mm / 10));
fnd(3, mm % 10);
fnd(4, Math.floor(ss / 10));
fnd(5, ss % 10);
}, 1000)
</script>
</body>
</html>
728x90
'Software > JavaScript' 카테고리의 다른 글
| JavaScript 시작하기 - QRcode (0) | 2024.06.14 |
|---|---|
| Javascript 시작하기 - SVG 디지탈 날짜 및 시계 (0) | 2024.06.14 |
| HTML - 마우스 클릭 한 TD에 DIV 겹치기 (0) | 2024.04.03 |
| NodeJS에서 SQLite3 사용하기 (0) | 2023.12.25 |
| JavaScript 시작하기 - three.js 소개 (0) | 2023.12.10 |