用JavaScript实现秒表的开始暂停和复位

最新推荐文章于 2021-07-29 15:25:38 发布

原创最新推荐文章于 2021-07-29 15:25:38 发布 · 920 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #css #html

学习专栏收录该内容

59 篇文章

订阅专栏

本文介绍了如何使用JavaScript来创建一个具备开始、暂停和复位功能的秒表。通过结合HTML和CSS，创建用户友好的界面，利用JavaScript的定时器功能更新计时显示，实现了秒表的基本操作。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #div1{width: 100px; height: 200px; padding: 50px; background-color: orange; border: 1px solid black; margin: 100px auto; text-align: center}
        #div1 span{font-size: 22px}
        #div1 button{width: 100px; height: 30px; font-size: 16px; margin-top: 20px; background-color: black; color: white}
    </style>
    <script>
         //通过id获取标签的方法进行简化
         function $(id){
           return document.getElementById(id);
        }
        window.onload = function(){// 写在这里代码，是整个页面加载完成以后运行的(固定格式)
            var i= 0; //总秒数
            var timer = null;  //记录定时器的返回值
            var isRunning = false; //布尔值指示当前定时器是否正在运行
            function startFunc(){
                    timer = setInterval(function(){
                        i++;
                        $("sec").innerHTML = doubleNum(i % 60);
                        $("min").innerHTML = doubleNum(parseInt(i / 60) % 60);
                        $("hour").innerHTML = doubleNum(parseInt(i / 3600));

                    }, 1000);
                }
       
                  //暂停函数
            function pasueFunc(){
                clearInterval(timer);
            }
        //重置按钮
             $("reset").onclick = function(){
                    clearInterval(timer);
                    $("btn1").innerHTML = "开始";
                    isRunning = false;
                    i = 0;
                    $("sec").innerHTML = "00";
                    $("min").innerHTML = "00";
                    $("hour").innerHTML = "00";
                }
            //1、给btn1按钮添加点击事件 
            $("btn1").onclick = function(){
                    if(isRunning==false){
                        $("btn1").innerHTML = "暂停";
                        isRunning = true;
                        startFunc();
                    }else{
                        $("btn1").innerHTML = "开始";
                        isRunning = false;
                        pasueFunc();
                    }
                }
            }
            
                function doubleNum(n){
                if(n < 10){
                    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>