728x90
<!DOCTYPE html>
<html>
<body>
<h1 class = "h1-date"></h1>
<h1 class = "h1-clock"></h1>
<script>
const clock = document.querySelector('.h1-clock');
const date = document.querySelector('.h1-date');
function getTime(){
const time = new Date();
const hour = time.getHours();
const minutes = time.getMinutes();
const seconds = time.getSeconds();
var year = time.getFullYear();
var month = time.getMonth()+1;
var day = time.getDate();
//clock.innerHTML = hour +":" + minutes + ":"+seconds;
clock.innerHTML = `${hour<10 ? `0${hour}`:hour} : ${minutes<10 ? `0${minutes}`:minutes} : ${seconds<10 ? `0${seconds}`:seconds}`;
date.innerHTML = year + "년 " + month + "월 " + day + "일";
}
function init(){
setInterval(getTime, 1000);
}
init();
</script>
</body>
</html>
728x90
'HTML with 자바스크립트 > 시계' 카테고리의 다른 글
| 자바스크립트 함수 주기적 실행 setInterval() , setInterval(함수, 밀리초) 사용법 (0) | 2023.05.17 |
|---|---|
| 일정 시간 지연 후 함수를 실행하는 자바스크립트 (0) | 2020.01.25 |