IT노트(구)/JavaScript
자바스크립트로 실시간 시계 만들기
스프링연구소
2015. 12. 9. 13:06
자바스크립트에서도 디지털 시계를 구현할 수 있다!
거칠게 정리하자면 다음과 같은 원리라고 할 수 있다.
1. new Date()를 사용해서 시간 정보 추출
2. innerHTML을 통해 화면 렌더링
3. setTimeout()을 이용해서 0.5초 단위 갱신
예제 소스는 다음과 같다!(출처 : http://www.w3schools.com)
<!DOCTYPE html>
<html>
<head>
<script>
function startTime() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
m = checkTime(m);
s = checkTime(s);
document.getElementById('clock').innerHTML =
h + ":" + m + ":" + s;
var t = setTimeout(startTime, 500);
}
function checkTime(i) {
if (i < 10) {i = "0" + i}; // 숫자가 10보다 작을 경우 앞에 0을 붙여줌
return i;
}
</script>
</head>
<body onload="startTime()">
<div id="clock"></div>
</body>
</html>
</html>