网页秒表小工具

神也小忐忑

于 2024-07-26 11:05:43 发布

阅读量142

点赞数 2

分类专栏：杂七杂八文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_45824463/article/details/140710383

版权

杂七杂八专栏收录该内容

6 篇文章 0 订阅

订阅专栏

网页秒表小工具

效果展示

在这里插入图片描述

HTML代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>简洁秒表</title>
    <style>
		
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f4f4f4;
        }
        .timer-container {
            text-align: center;
        }
        .display {
            font-size: 48px;
            margin-bottom: 20px;
        }
        .button {
            padding: 10px 20px;
            margin: 5px;
            font-size: 16px;
            cursor: pointer;
        }
        #start, #pause {
            background-color: #4CAF50;
            color: white;
        }
        #reset {
            background-color: #f44336;
            color: white;
        }
    </style>
</head>
<body>
    <div class="timer-container">
        <div class="display" id="timerDisplay">00:00:00</div>
        <button class="button" id="start">开始</button>
        <button class="button" id="pause">暂停</button>
        <button class="button" id="reset">重置</button>
    </div>

    <script>
        let seconds = 0;
        let interval = null;

        function updateTimerDisplay() {
            let hours = Math.floor(seconds / 3600);
            let minutes = Math.floor((seconds - (hours * 3600)) / 60);
            let secs = seconds % 60;

            hours = hours < 10 ? '0' + hours : hours;
            minutes = minutes < 10 ? '0' + minutes : minutes;
            secs = secs < 10 ? '0' + secs : secs;

            document.getElementById('timerDisplay').textContent = 
                hours + ':' + minutes + ':' + secs;
        }

        document.getElementById('start').addEventListener('click', function() {
            if (interval) clearInterval(interval);
            interval = setInterval(function() {
                seconds++;
                updateTimerDisplay();
            }, 1000);
        });

        document.getElementById('pause').addEventListener('click', function() {
            clearInterval(interval);
        });

        document.getElementById('reset').addEventListener('click', function() {
            clearInterval(interval);
            seconds = 0;
            updateTimerDisplay();
        });
    </script>
</body>
</html>