HTML 패널
<h2>스톱워치</h2>
<div id="display">00:00:00</div>
<button id="startBtn">시작</button>
<button id="pauseBtn">일시정지</button>
<button id="resetBtn">리셋</button>
JavaScript 패널
let seconds = 0;
let minutes = 0;
let hours = 0;
let timer = null;
let isRunning = false;
document.getElementById('startBtn').addEventListener('click', function() {
if (!isRunning) {
timer = setInterval(updateTimer, 1000);
isRunning = true;
}
});
document.getElementById('pauseBtn').addEventListener('click', function() {
clearInterval(timer);
isRunning = false;
});
document.getElementById('resetBtn').addEventListener('click', function() {
clearInterval(timer);
isRunning = false;
seconds = 0;
minutes = 0;
hours = 0;
updateDisplay();
});
function updateTimer() {
seconds++;
if (seconds >= 60) {
seconds = 0;
minutes++;
}
if (minutes >= 60) {
minutes = 0;
hours++;
}
updateDisplay();
}
function updateDisplay() {
let h = hours < 10 ? '0' + hours : hours;
let m = minutes < 10 ? '0' + minutes : minutes;
let s = seconds < 10 ? '0' + seconds : seconds;
document.getElementById('display').textContent = h + ':' + m + ':' + s;
}
CSS 패널
body {
font-family: 'Courier New', monospace;
text-align: center;
padding: 50px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
}
#display {
font-size: 72px;
margin: 30px 0;
padding: 20px;
background-color: rgba(0, 0, 0, 0.3);
border-radius: 10px;
display: inline-block;
}
button {
padding: 15px 30px;
margin: 10px;
font-size: 18px;
cursor: pointer;
border: none;
border-radius: 5px;
background-color: white;
color: #667eea;
font-weight: bold;
}
button:hover {
background-color: #f0f0f0;
}
Comments
0 B
|0 👍
/0 👎
0 B
|0 👍
/0 👎