웹 보안 - 타이머 만들기

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;
}