728x90
티스토리 사이드바 디지털시계 HTML
아래 코드를 텍스트 에디터에 붙여넣고 실행하면, 현재 시간을 실시간으로 보여주는 디지털 시계가 나타납니다.
코드를 자세히 살펴보면, 먼저 updateClock() 함수를 정의합니다. 이 함수는 현재 시간을 Date 객체로 변환하고, getHours(), getMinutes(), getSeconds() 메서드를 사용하여 시간, 분, 초를 추출합니다. 그리고 innerHTML 속성을 사용하여 추출한 시간, 분, 초를 clock 요소에 출력합니다.
마지막으로, setTimeout() 함수를 사용하여 updateClock() 함수를 1초마다 호출합니다. 이렇게 하면 디지털 시계가 실시간으로 업데이트됩니다.
이 코드를 실행하면 현재 시간을 실시간으로 보여주는 디지털 시계를 만들 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>디지털 시계</title>
<style>
#clock {
font-size: 50px;
font-weight: bold;
text-align: center;
}
</style>
</head>
<body>
<h1>디지털 시계</h1>
<div id="clock"></div>
<script>
function updateClock() {
let date = new Date();
let hours = date.getHours();
let minutes = date.getMinutes();
let seconds = date.getSeconds();
let clock = document.getElementById("clock");
clock.innerHTML = hours + ":" + minutes + ":" + seconds;
setTimeout(updateClock, 1000);
}
updateClock();
</script>
</body>
</html>
728x90
SMALL
'블로그 > 팁' 카테고리의 다른 글
| CMOS 암호 초기화 방법 (0) | 2024.02.03 |
|---|---|
| 목업에 대한 정의와 종류(소프트목업, 워킹목업, 디자인목업) (0) | 2024.02.02 |
| 티스토리 기본 스킨 소개 (0) | 2024.01.31 |
| 티스토리 사이드바 만 나이코드 HTML (0) | 2024.01.30 |
| 메타테그 확인하는 방법(구글, 빙, 네이버) (1) | 2024.01.29 |