setTimeout(showClock,1000) 로 재귀함수를 통해 1초마다 변경시켜준다
<결과>
현재 시간: 22시 1분 16초
[소스코드]
<!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>Document</title>
<style>
.clock{
font-family: tahoma;
font-size: 24pt;
color: #006699;
}
</style>
<script>
function showClock(){
var currentDate = new Date();
var divClock = document.getElementById("divClock");
var msg = '현재 시간: ' + currentDate.getHours() + "시 ";
msg += currentDate.getMinutes() + "분 ";
msg += currentDate.getSeconds() + "초 ";
divClock.innerHTML = msg;
setTimeout(showClock, 1000);
}
</script>
</head>
<body onload="showClock()">
<div id="divClock" class="clock"></div>
</body>
</html>'JavaScript > 바닐라.js' 카테고리의 다른 글
| 자바스크립트를 이용한 구글로 로그인 하기 (1) | 2022.11.09 |
|---|---|
| 회원가입 페이지 만들기 (정규표현식 미사용) (0) | 2022.09.14 |
| 회원가입 페이지 만들기 (정규표현식 사용) (0) | 2022.09.14 |
| 계산기 만들기 (4) | 2022.09.13 |
| 글자 변환 (0) | 2022.09.08 |