자바스크립트에서도 디지털 시계를 구현할 수 있다!
거칠게 정리하자면 다음과 같은 원리라고 할 수 있다.
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>
'IT노트(구) > JavaScript' 카테고리의 다른 글
| 자바스크립트로 input 태그를 readonly로 만드는 방법 (1) | 2015.12.15 |
|---|---|
| jQuery에서 bind와 on의 차이점 및 사용 예제 (0) | 2015.12.10 |
| 체크박스(checkbox) 모두 체크 기능 구현하기(자바스크립트 이용) (0) | 2015.12.09 |
| jQuery 이용해서 선택된 radio 값 가져오기 (0) | 2015.12.09 |
| 자바스크립트 delete 사용 예제(오브젝트 속성 삭제) (0) | 2015.12.07 |