현재시간 javascript로 시계 프로그램 작성하기(코드포함)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>실시간 시계</title> <style> body { font-family: Arial, sans-serif; text-align: center; margin-top: 100px; font-size: 3em; } </style> </head> <body> <div id="clock"></div> <script> function updateTime() { // 현재 시간 가져오기 var now = new Date(); var hours = now.getHours(); var minutes = now.getMinutes(); var seconds = now.getSeconds(); // 시간, 분, 초가 한 자리 숫자인 경우 앞에 0 추가 hours = padZero(hours); minutes = padZero(minutes); seconds = padZero(seconds); // 시계 표시 var clock = document.getElementById('clock'); clock.textContent = hours + ":" + minutes + ":" + seconds; } function padZero(num) { return (num < 10 ? '0' : '') + num; } // 1초마다 시간 업데이트 setInterval(updateTime, 1000); // 페이지 로드시 초기화 updateTime(); </script> </body> </html>
이 코드를 HTML 파일에 저장하여 브라우저에서 열면 실시간 시계가 표시됩니다.
JavaScript의 setInterval 함수를 사용하여 1초마다 시간을 업데이트하고, 이를 표시하는 간단한 기능을 구현했습니다.
'AI물어보살' 카테고리의 다른 글
| 간단한 영어 회화 무한반복 프로그램 작성하기 (0) | 2024.05.22 |
|---|---|
| 가계부 프로그램,javascript로 작성한 가계부 프로그램 (0) | 2024.05.22 |
| 집금거래목적아님과 집금거래목적 구분(증권계좌 고객확인때 당황하셨죠) (0) | 2024.05.20 |
| 장애인전용주차장 주차가능 스티커와 주차불가 스티커 구분 이유 (0) | 2024.05.18 |
| [키워드뉴스]518민주화운동,해외직구금지령,멍때리기대회 등... (0) | 2024.05.18 |
