웹 스톱워치

by 그뤠잇팔공케이 2023. 9. 18. 16:24

SMALL

https://stopwatchhwan.netlify.app/

스톱워치

stopwatchhwan.netlify.app

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>랩 타임 스톱워치</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="stopwatch-container">
        <div class="stopwatch">
            <div class="time" id="display">0:00:00.000</div>
            <button id="startStopButton">시작</button>
            <button id="lapButton">랩</button>
            <button id="resetButton">리셋</button>
        </div>
        <div class="lap">
            <h2>랩 타임 기록</h2>
            <ol id="lapTimes" class="lap-times"></ol>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

let startTime;
let interval;
let running = false;
let lapCount = 1;

const display = document.getElementById('display');
const startStopButton = document.getElementById('startStopButton');
const lapButton = document.getElementById('lapButton');
const resetButton = document.getElementById('resetButton');
const lapTimesList = document.getElementById('lapTimes');

function formatTime(milliseconds) {
    const hours = Math.floor(milliseconds / 3600000);
    const minutes = Math.floor((milliseconds % 3600000) / 60000);
    const seconds = Math.floor((milliseconds % 60000) / 1000);
    const millisecondsPart = (milliseconds % 1000).toFixed(0).padStart(3, '0');
    return `${hours}:${(minutes < 10 ? '0' : '')}${minutes}:${(seconds < 10 ? '0' : '')}${seconds}.${millisecondsPart}`;
}

function startStop() {
    if (running) {
        clearInterval(interval);
        startStopButton.textContent = '시작';
        lapButton.textContent = '랩';
    } else {
        startTime = Date.now() - (interval ? interval : 0);
        interval = setInterval(updateDisplay, 10);
        startStopButton.textContent = '정지';
        lapButton.textContent = '랩';
    }
    running = !running;
}

function reset() {
    clearInterval(interval);
    interval = null;
    display.textContent = '0:00:00.000';
    startStopButton.textContent = '시작';
    lapButton.textContent = '랩';
    running = false;
    lapCount = 1;
    lapTimesList.innerHTML = '';
}

function updateDisplay() {
    const elapsedTime = Date.now() - startTime;
    display.textContent = formatTime(elapsedTime);
}

function lapTime() {
    if (interval) {
        const elapsedTime = Date.now() - startTime;
        const lapTime = formatTime(elapsedTime);
        const lapItem = document.createElement('li');
        lapItem.textContent = `랩 ${lapCount}: ${lapTime}`;
        lapTimesList.appendChild(lapItem);
        lapCount++;
    }
}

startStopButton.addEventListener('click', startStop);
resetButton.addEventListener('click', reset);
lapButton.addEventListener('click', lapTime);

reset();

LIST

저작자표시 비영리 변경금지

'지식·동향 > 애플리케이션 만들기' 카테고리의 다른 글

로또 번호 추첨기 (0)	2023.09.28
갑자기 제비뽑기를 해야할때.. (0)	2023.09.28
이름으로 궁합보기 (0)	2023.09.18
AI 로또 번호 생성 로또추첨기 (0)	2023.09.18
별관찰 앱 (0)	2022.07.26