반응형
자바스크립트로 구현한 실시간 시계(타이머)입니다.
스크립트로 현재 날짜와 시간을 가져와서 date/ month / 분 / 초 에는 10보다 작으면 앞에 0을 붙여주는
형태입니다.
setTimeout() 함수를 통해서 0.5초마다 함수를 실행하고 있습니다.
간단한 소스 이므로 쉽게 구현 가능하십니다.
<!DOCTYPE html>
<html>
<head>
<script>
function startTime() {
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth()+1;
var yyyy = today.getFullYear();
if(dd<10) {
dd='0'+dd
}
if(mm<10) {
mm='0'+mm
}
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
m = checkTime(m);
s = checkTime(s);
document.getElementById('clock').innerHTML = "시계 <br>"+yyyy + "-" + mm + "-" + dd + " " + h + ":" + m + ":" + s;
setTimeout(startTime, 500);
}
function checkTime(i) {
if (i < 10) {i = "0" + i};
return i;
}
</script>
</head>
<body onload="startTime()">
<div id="clock" style="border: 1px solid; text-align: center;font-size: 20px;width: 300px; margin-right: auto; margin-left: auto;"></div>
</body>
</html>
↓↓↓↓↓ 소스 예제 화면입니다.
반응형
'개발이야기 > 자바스크립트' 카테고리의 다른 글
| [자바스크립트] selectbox(셀렉트박스) 년도, 월 만들기 (년도 역순) (4) | 2022.11.17 |
|---|---|
| [자바스크립트] 더보기 (more) 버튼으로 리스트 노출하기 (2) | 2022.11.03 |
| [자바스크립트] 오늘 하루 열지 않기 / 닫기 (레이어 팝업) (0) | 2022.10.21 |
| [자바스크립트] Apexcharts 사용법, 예제, 차트 그리기 (0) | 2022.10.20 |
| [자바스크립트] javascript 테이블 병합하기 (table td rowspan) (0) | 2022.10.13 |
댓글