아래는 HTML, CSS 및 JavaScript를 사용하여 간단한 타이머를 만드는 코드입니다. 이 코드는 초보자도 이해하기 쉽도록 주석이 추가되어 있습니다.
html
Copy code
<!DOCTYPE html>
<html>
<head>
<title>간단한 타이머</title>
<style>
/* 스타일 지정 */
#timer {
font-size: 24px;
}
</style>
</head>
<body>
<h1>간단한 타이머</h1>
<!-- 타이머 표시 -->
<p>남은 시간: <span id="timer">0</span>초</p>
<!-- 시작 버튼 -->
<button onclick="startTimer()">시작</button>
<!-- 정지 버튼 -->
<button onclick="stopTimer()">정지</button>
<!-- 초기화 버튼 -->
<button onclick="resetTimer()">초기화</button>
<script>
var interval; // 타이머 간격 저장 변수
var seconds = 0; // 초기 시간 설정 (초 단위)
// 시작 버튼 클릭 시 호출되는 함수
function startTimer() {
clearInterval(interval); // 기존 타이머 정지
interval = setInterval(function() {
seconds++; // 초 증가
document.getElementById("timer").textContent = seconds; // 시간 표시
}, 1000); // 1초마다 실행
}
// 정지 버튼 클릭 시 호출되는 함수
function stopTimer() {
clearInterval(interval); // 타이머 정지
}
// 초기화 버튼 클릭 시 호출되는 함수
function resetTimer() {
clearInterval(interval); // 타이머 정지
seconds = 0; // 시간 초기화
document.getElementById("timer").textContent = seconds; // 시간 표시 초기화
}
</script>
</body>
</html>
'HTML 예제' 카테고리의 다른 글
| 버튼 클릭으로 글자 변경 (0) | 2023.12.07 |
|---|---|
| 이미지 슬라이드 쇼 (0) | 2023.12.07 |
| 간단한 계산기 (0) | 2023.12.07 |
| Hello, World! 출력 (0) | 2023.12.07 |
| 시계 애플리케이션: JavaScript로 디지털 시계 애플리케이션 만들기 (2) | 2023.12.06 |
