앞에서 만든 시계에 날짜까지 표시하게 수정해보자.
HTML 소스
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Time</title>
</head>
<body>
<div id="date1">
</div>
<div id="time1">
</div>
<script>
const fnd1 = `<svg width="80" height="120" viewBox="-1 -1 12 20" stroke-width=".25" stroke="#fff">
<polygon points="1, 1 2, 0 8, 0 9, 1 8, 2 2, 2"/>
<polygon points="9, 1 10, 2 10, 8 9, 9 8, 8 8, 2"/>
<polygon points="9, 9 10,10 10,16 9,17 8,16 8,10"/>
<polygon points="9,17 8,18 2,18 1,17 2,16 8,16"/>
<polygon points="1,17 0,16 0,10 1, 9 2,10 2,16"/>
<polygon points="1, 9 0, 8 0, 2 1, 1 2, 2 2, 8"/>
<polygon points="1, 9 2, 8 8, 8 9, 9 8,10 2,10"/>
</svg>`;
const fnd2 = `<svg width="20" height="120" viewBox="0 0 4 20" fill="#0F0">
<rect cx="0" x="0" y="10" width="4" height="1"/>
</svg>`;
const fnd3 = `<svg width="20" height="120" viewBox="0 0 4 20" fill="#0F0">
<circle cx="2" cy="6" r="1" />
<circle cx="2" cy="14" r="1" />
</svg>`;
function fnd(tag, pos, num) {
let loc = pos * 7;
for (let bit = 0; bit < 7; bit++) {
tag[loc + bit].style.fill = (fndA[num] & (2 ** (6 - bit))) ? "#0F0" : "#0F01";
}
}
function display(tag, pos, num) {
fnd(tag, pos, Math.floor(num / 10 % 10));
fnd(tag, pos + 1, num % 10);
return num;
}
function initDateTag() {
const dt1 = document.getElementById('date1');
dt1.innerHTML = fnd1 + fnd1 + fnd2 + fnd1 + fnd1 + fnd2 + fnd1 + fnd1;
const tm1 = document.getElementById('time1');
tm1.innerHTML = fnd1 + fnd1 + fnd3 + fnd1 + fnd1 + fnd3 + fnd1 + fnd1;
}
initDateTag();
let date1 = document.querySelectorAll("#date1 svg > polygon");
let time1 = document.querySelectorAll("#time1 svg > polygon");
let fndA = [ 0x7e, 0x30, 0x6d, 0x79, 0x33, 0x5b, 0x5f,0x70, 0x7f, 0x7b];
let date = new Date();
display(date1, 0, date.getFullYear());
display(date1, 2, date.getMonth()+1);
display(date1, 4, date.getDate());
display(time1, 0, date.getHours());
display(time1, 2, date.getMinutes());
display(time1, 4, date.getSeconds());
setInterval(() => {
let date = new Date();
(display(time1, 4, date.getSeconds()) == 0) &&
(display(time1, 2, date.getMinutes()) == 0) &&
(display(time1, 0, date.getHours()) == 0) &&
(display(date1, 4, date.getDate()) == 1) &&
(display(date1, 2, date.getMonth()+1) == 1) &&
display(date1, 0, date.getFullYear());
}, 1000)
</script>
</body>
</html>
728x90
반응형
'Software > JavaScript' 카테고리의 다른 글
| JavaScript 개발 시작하기 - SVG to PNG (1) (1) | 2024.06.14 |
|---|---|
| JavaScript 개발 시작하기 - QRcode(1) (0) | 2024.06.14 |
| JavaScript 개발 시작하기 - SVG(1) 디지털시계 (0) | 2024.06.14 |
| HTML - 마우스 클릭 한 TD에 DIV 겹치기 (0) | 2024.04.03 |
| NodeJS에서 SQLite3 사용하기 (0) | 2023.12.25 |