반응형
[새로 알게된 것]
getHours
getMins
getSeconds
textContent는 innerContent와 비슷하지만 반환 시 여백도 그대로 가져온다.
1. 아직 h = (h < 10) ? "0" + h : h; 를 이해 못했다,, 없어도 잘 돌아가는데 ㅋㅋㅋ 다시 계산해봐야겠다.
2. 폰트 적용이 안돼 ~~ 디지털 느낌이면 더 좋을텐데 아숩아숩
[내가 짠 코드]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Digital Clock</title>
<style>
body {
background: rgb(20, 14, 22);
font-family: 'Orbitron-Regular';
}
#display {
color: #fff;
font-size: 5.5em;
text-align: center;
margin-top: 35%;
letter-spacing: 8px;
text-shadow: 0px 0px 6px rgb(229, 174, 255);
}
</style>
</head>
<body>
<div id="display" onload="showTime()"></div>
<script>
function showTime() {
let date = new Date();
let h = date.getHours(); //0부터 시작함
let m = date.getMinutes();
let s = date.getSeconds();
let session = " AM";
if (h == 0) {
h = 12;
if (h > 12) {
h = h - 12;
session = "PM";
}
}
let time = h + ":" + m + ":" + s + session;
document.getElementById("display").innerText = time;
setTimeout(showTime, 1000);
}
showTime();
</script>
</body>
</html>
반응형
