스톱워치 HTML코드입니다.
<!DOCTYPE html>
<html>
<head>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.stopwatch-container {
width: 60%;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
background-color: #f0f0f0;
padding: 20px;
border: 2px solid #333;
border-radius: 10px;
}
#display {
font-size: 3rem;
margin: 20px 0;
}
#startStopButton {
padding: 10px 20px;
font-size: 1rem;
}
input[type="number"] {
padding: 5px;
font-size: 1rem;
}
</style>
</head>
<body>
<div class="stopwatch-container">
<h1 id="display">00:00</h1>
<button id="startStopButton" onclick="startStop()">시작</button>
<input type="number" id="inputSeconds" placeholder="초 입력">
</div>
<audio id="beep" src="beep.mp3"></audio>
<script>
let timer;
let isRunning = false;
let secondsInput = document.getElementById("inputSeconds");
let display = document.getElementById("display");
let startStopButton = document.getElementById("startStopButton");
let beep = document.getElementById("beep");
function startStop() {
if (isRunning) {
stopTimer();
} else {
startTimer();
}
}
function startTimer() {
let seconds = parseInt(secondsInput.value);
if (isNaN(seconds) || seconds <= 0) {
alert("올바른 초를 입력하세요.");
return;
}
isRunning = true;
startStopButton.innerHTML = "멈춤";
timer = setInterval(function () {
seconds--;
displayTime(seconds);
if (seconds === 0) {
stopTimer();
beep.play();
}
}, 1000);
}
function stopTimer() {
clearInterval(timer);
isRunning = false;
startStopButton.innerHTML = "시작";
}
function displayTime(seconds) {
const minutes = Math.floor(seconds / 60);
const remainingSeconds = seconds % 60;
display.innerHTML = `${minutes.toString().padStart(2, "0")}:${remainingSeconds.toString().padStart(2, "0")}`;
}
</script>
</body>
</html>
이 코드를 실행하면 다음과 같은 화면이 나옵니다.
AI로 코딩한 것입니다.
'AI웹페이지코딩' 카테고리의 다른 글
| readdy ai 홈페이지 AI 코딩 (0) | 2025.03.14 |
|---|---|
| url만 입력하면 동영상 만들어 주는 사이트 (1) | 2025.02.22 |
| Framer.com AI가 만들어 주는 홈페이지 (0) | 2024.03.05 |
| 2023년 11월 달력 코드 (0) | 2023.11.05 |
| 간단한 계산기 코드 (0) | 2023.11.05 |
