Javascript 와 DOM을 사용해 간단한 시계.
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>시계</title>
<script>
function printTime() {
var clock = document.getElementById("clock"); // DOM을 이용해서 시계가 입력될 장소를 가져옴.
var now = new Date(); // 시간을 가져옴
var nowTime = now.getFullYear() + "년 " + (now.getMonth()+1) + "월" + now.getDate() + "일" + now.getHours() + "시" + now.getMinutes() + "분" + now.getSeconds() + "초";
clock.innerHTML = nowTime; // 현재 시간을 innerHTML을 사용해서 ID가 clock 인곳에 넣음
setTimeout("printTime()",1000); // 1초 단위로 함수를 부름.
}
window.onload = function() { // 페이지가 로드되면 함수를 실행
printTime();
}
</script>
<body>
현재 시간은 <span id="clock"></span> 입니다.<br />
</body>
</html>
DOM(Document Object Model)의 getElementById를 사용하여 ID가 clock를 clock 변수에 넣고, now에는 현재의 시간을 설정한다.
DOM을 가장 편하게 쓸수 있는 방법 중의 하나가 innerHTML 인데, clock.innerHTML 에 현재의 시간을 넣으면 쉽게 span 태그내에 시간이 들어간다.
소스 보기를 하면 당연히 span 태그 내에는 아무것도 없다.
'Web > Javascript' 카테고리의 다른 글
| Show Hide 자바스크립트 CheckBox (0) | 2008.07.04 |
|---|---|
| Show Hide Javascript (0) | 2008.07.02 |
| 자바스크립트를 이용한 간단한 SHOW HIDE (0) | 2008.03.20 |
| 입력폼에 숫자만 입력할수 있게 하기 (0) | 2008.03.04 |
| window.onload (0) | 2008.02.06 |