Html, Css 및 Javascript를 사용하여 타이머 카운터를 만드는 방법.
- Mary-Kate Olsen원래의
- 2024-10-10 11:13:301098검색
타이머 카운터를 구축하는 것은 HTML, CSS 및 JavaScript 간의 상호 작용을 이해하는 좋은 방법입니다. 이 게시물은 사용자가 버튼을 클릭할 때 계산을 시작하는 간단한 타이머를 만드는 과정을 안내합니다. 타이머는 경과 시간을 시, 분, 초 단위로 표시합니다.
1단계: HTML 구조
기본 HTML 구조를 만드는 것부터 시작하세요. 타이머를 표시하려면 div가 필요하고 타이머를 시작하려면 버튼이 필요합니다. 예는 다음과 같습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Timer Counter</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Timer Counter</h1>
<div id="timer">00:00:00</div>
<button id="startButton">Start Timer</button>
</div>
<script src="script.js"></script>
</body>
</html>
이 HTML 파일의 내용:
id="timer"인 div는 타이머를 표시하는 데 사용됩니다.
id="start Button"인 버튼은 타이머를 시작하는 데 사용됩니다.
2단계: CSS 스타일링
다음으로 HTML 요소의 스타일을 지정하여 시각적으로 매력적인 인터페이스를 만듭니다. 원하는 스타일로 자유롭게 스타일링해보세요.
/* styles.css */
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.container {
text-align: center;
}
#timer {
font-size: 3rem;
margin-bottom: 20px;
}
button {
padding: 10px 20px;
font-size: 1rem;
cursor: pointer;
}
이 CSS 파일:
콘텐츠를 수직 및 수평 중앙에 배치합니다.
큰 글꼴 크기로 타이머 디스플레이 스타일을 지정합니다.
버튼에 패딩과 스타일을 추가하여 클릭 가능성을 높였습니다.
3단계: JavaScript 로직
마지막으로 타이머 기능을 처리하는 JavaScript를 추가합니다. 여기에는 타이머 시작, 매초 업데이트 및 경과 시간 표시가 포함됩니다.
// script.js
document.addEventListener("DOMContentLoaded", () => {
const startButton = document.getElementById("startButton");
const timerDisplay = document.getElementById("timer");
let timerInterval;
let startTime;
function startTimer() {
startTime = new Date();
timerInterval = setInterval(updateTimer, 1000);
}
function updateTimer() {
const currentTime = new Date();
const elapsedTime = new Date(currentTime - startTime);
const hours = String(elapsedTime.getUTCHours()).padStart(2, '0');
const minutes = String(elapsedTime.getUTCMinutes()).padStart(2, '0');
const seconds = String(elapsedTime.getUTCSeconds()).padStart(2, '0');
timerDisplay.textContent = `${hours}:${minutes}:${seconds}`;
}
startButton.addEventListener("click", startTimer);
});
이 JavaScript 파일:
실행하기 전에 DOM이 로드될 때까지 기다립니다.
시작 시간을 초기화하고 시간을 설정하는 startTimer 함수를 정의합니다
매 초마다 타이머를 업데이트하는 간격입니다.경과 시간을 계산하는 updateTimer 함수를 정의하고
형식을 지정합니다.
타이머 표시를 업데이트하세요.
클릭 시 타이머가 시작되도록 버튼에 이벤트 리스너를 추가합니다.
보너스:
시작 버튼 숨기기 및 중지 버튼 스크립트 표시
// script.js
document.addEventListener("DOMContentLoaded", () => {
const startButton = document.getElementById("startButton");
const stopButton = document.getElementById("stopButton");
const timerDisplay = document.getElementById("timer");
let timerInterval;
let startTime;
function startTimer() {
startTime = new Date();
timerInterval = setInterval(updateTimer, 1000);
startButton.style.display = "none";
stopButton.style.display = "inline-block";
}
function stopTimer() {
clearInterval(timerInterval);
startButton.style.display = "inline-block";
stopButton.style.display = "none";
}
function updateTimer() {
const currentTime = new Date();
const elapsedTime = new Date(currentTime - startTime);
const hours = String(elapsedTime.getUTCHours()).padStart(2, '0');
const minutes = String(elapsedTime.getUTCMinutes()).padStart(2, '0');
const seconds = String(elapsedTime.getUTCSeconds()).padStart(2, '0');
timerDisplay.textContent = `${hours}:${minutes}:${seconds}`;
}
startButton.addEventListener("click", startTimer);
stopButton.addEventListener("click", stopTimer);
});
위 내용은 Html, Css 및 Javascript를 사용하여 타이머 카운터를 만드는 방법.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!