【计时器】

最新推荐文章于 2025-12-20 12:23:55 发布

原创最新推荐文章于 2025-12-20 12:23:55 发布 · 68 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html

该HTML代码实现了一个简单的计时器功能，包括开始、暂停和重置。计时器显示小时、分钟和秒，使用JavaScript进行时间更新，并通过CSS进行样式设计。点击按钮控制计时器的状态。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #div1{width: 150px ;
            height: 200px ;
            padding: 50px ;
            background-color: orange ;
            border:  1px solid black;
            text-align:center ;
            margin-left:auto;
            margin-right:auto;
        }
        #div1 span{
            font-size: 22px;
        }
        #div1 button{
            width: 100px ;
            height: 30px ;
            font-size: 16px;
             margin-top: 20px ;
             background-color: black ;color: aliceblue ;
        }
    </style>
    <script>
        function $(id){
            return document.getElementById(id);
        }
        var i = 0; //总秒数；
        var timer = null; //记录定时器返回值
        var isRunning = false; //表示当前页面下程序是否在运行
        window.onload = function(){
            function startFunc(){
                //开始按钮
                timer = setInterval(function(){
                    i++;
                    $("sec").innerHTML = doubletime(i % 60);
                    $("min").innerHTML = doubletime(parseInt( i / 60 ) % 60 );
                    $("hour").innerHTML = doubletime(parseInt( i / 3600 ));
                },1000);
            }
            //暂停按钮
            function pauseFunc(){
                clearInterval(timer);
            }
            //给按钮添加变化
            $("btn1").onclick = function(){
                if(!isRunning){
                    $("btn1").innerHTML = '暂停'
                    isRunning = true;
                    startFunc();
                }else{
                    $("btn1").innerHTML = '开始'
                    isRunning = false;
                    pauseFunc();
                }
            }
            //复位按钮
            $("reset").onclick = function(){
                clearInterval(timer);
                i = 0;
                isRunning = false;
                $("btn1").innerHTML = '开始' 
                $("sec").innerHTML = "00";
                $("min").innerHTML = "00";
                $("hour").innerHTML = "00";
            }
        }
        function doubletime(n){
            if (n <= 9){
                return "0" + n;
            }else{
                return n;
            }
        }
    </script>
</head>
<body>
    <div id = 'div1'>
        <span id = 'hour'>00</span>
        <span>:</span>
        <span id = 'min'>00</span>
        <span>:</span>
        <span id = 'sec'>00</span>
        <br/>
        <button id = 'btn1'>开始</button>
        <button id = 'reset'>复位</button>
    </div>
</body>
</html>