![[HTML소스포함]JavaScript로_시계_만들기](https://blog.kakaocdn.net/dn/ceo5bF/btsBY0XQEBB/zNk5MwjeaAc5L1KI9Fi2M1/img.png)
HTML과 CSS를 이용하여
시계의 모양을 만들고,
JavaScript를 이용하여
시계의 시간을 실시간으로 업데이트합니다.
코드블럭 -->
<html>
<head>
<title>시계 만들기</title>
<style>
#clock {
font-size: 50px;
text-align: center;
}
</style>
</head>
<body>
<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>
HTML 블럭 -->
<!DOCTYPE html>
<html>
<head>
<title>시계 만들기</title>
<style>
#clock {
font-size: 50px;
text-align: center;
}
</style>
</head>
<body>
<div id="clock"></div>
<script>
// updateClock 함수를 정의합니다.
// 이 함수는 매 초마다 호출되어 시계의 시간을 업데이트합니다.
function updateClock() {
// 현재 시간을 Date 객체로 구합니다.
let date = new Date();
// 현재 시간의 시, 분, 초를 구합니다.
let hours = date.getHours();
let minutes = date.getMinutes();
let seconds = date.getSeconds();
// clock 요소를 찾아서 innerHTML 속성을 이용하여 시간을 출력합니다.
let clock = document.getElementById("clock");
clock.innerHTML = `${hours}:${minutes}:${seconds}`;
// setTimeout 함수를 이용하여 updateClock 함수를 1초 후에 다시 호출합니다.
setTimeout(updateClock, 1000);
}
// updateClock 함수를 호출하여 시계를 시작합니다.
updateClock();
</script>
</body>
</html>
'Yami 정보!' 카테고리의 다른 글
| 선묵혜자스님 108산사 지역별 사찰 리스트, 순례 영상 포함 (4) | 2024.03.16 |
|---|---|
| 다양한 풍미와 맛의 영어 표현, 맛표현, 한글 맛표현 (2) | 2024.01.03 |
| [HTML소스포함]JavaScript로 만 나이 계산하기 (1) | 2023.12.05 |
| (노코드 앱) 구글 앱시트(Appsheet) 화면 메뉴 (0) | 2023.09.12 |
| 손목닥터9988 포인트 사용 서울페이 서울사랑상품권 (0) | 2023.06.11 |
댓글