使用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>
</head>
<body>
    <div>00:00:00:00</div>
    <button>开始</button>
    <button disabled>暂停</button>
    <button disabled>继续</button>
    <button disabled>重置</button>

    <script>
//定义一个变量,根据定时器每秒执行一次,每次执行++自增操作,变量存储的数值,就会每秒+1。现在需要的记录效果是每0.01秒,也就是10毫秒执行一次。根据累计的数值执行进位。如果毫秒达到100就是1秒,如果秒达到60就是1分钟,如果分钟达到60就是1小时

        var ms = 0;  // 毫秒
        var s = 0;   // 秒
        var m = 0;   // 分钟
        var h = 0;   // 小时

        // 单独定义存储时、分、秒、毫秒的字符串的变量来存储累加时间的执行结果,因为如果直接在ms、s、m、h变量上进行拼接操作,会影响++操作的执行       
        var msStr = '';
        var sStr = '';
        var mStr = '';
        var hStr = '';

        // 因为定时器是定义在函数内部,必须定义一个全局变量来存储定时器,在函数外部可以调用终止定时器
        var time = 0;

        // 获取div标签对象
        var oDiv = document.querySelector('div');

        // 获取按钮的标签对象
        var oStart = document.querySelectorAll('button')[0]; // 开始
        var oPause  = document.querySelectorAll('button')[1]; // 暂停
        var oCont = document.querySelectorAll('button')[2]; //继续
        var oReset = document.querySelectorAll('button')[3]; // 重置

        // 给四个按钮添加点击事件效果
        
        // 开始按钮
        oStart.onclick = function(){
            // 点击开始按钮执行函数,执行秒表计时
            setTimeStr();
            // 可以点暂停
            oPause.disabled = false;
            // 其他标签都不能点
            oStart.disabled = true;
            oCont.disabled = true;
            oReset.disabled = true;
        }

        // 暂停按钮
        oPause.onclick = function(){
            // 点击暂停按钮,清除定时器,终止秒表执行
            clearInterval(time);
            // 暂停本身和开始不能点
            oPause.disabled = true;
            oStart.disabled = true;
            // 继续和重置能点了
            oCont.disabled = false;
            oReset.disabled = false;
        }

        // 继续按钮
        oCont.onclick = function(){
            // 点击继续按钮,继续执行定时器
            setTimeStr();
            // 暂停可以点
            oPause.disabled = false;
            // 其他都不能点
            oCont.disabled = true;
            oReset.disabled = true;
            oStart.disabled = true;
        }


        // 重置按钮
        oReset.onclick = function(){
            // 点击重置按钮,将所有的数据都恢复到0的状态
            // 所有变量存储的数据都是0, div中的内容也恢复到0          
            // 定义所有存储时间的变量存储的数值为0 
            ms = 0;  // 毫秒
            s = 0;   // 秒
            m = 0;   // 分钟
            h = 0;   // 小时
            // 将div中的内容,设定为初始状态的00:00:00:00内容
            oDiv.innerHTML = '00:00:00:00';
            // 开始可以点
            oStart.disabled = false;
            // 其他都不能点
            oPause.disabled = true;
            oCont.disabled = true;
            oReset.disabled = true;
        }

        // 每次点击开始按钮或者继续按钮都会调用执行函数,都会生成一个新的定时器。time中存储的是当前这个新的定时器,是整个程序中定时器的序号
        // 例如点击开始按钮10次会生成10个定时,time中存储最后一个定时器的序号10
        // 当点击暂停按钮时,清除的是time中存储的序号是10的这一个定时器,之前 1-9定时器仍然会执行      
        // 解决方法:点击开始按钮之后,在点击暂停按钮之前,禁止再次点击开始按钮。也就是在清除原有定时器之前,不允许生成新的定时器

        // 定义函数,这个函数的作用就是记录执行的时间,有小时、分钟、秒、毫秒 4个部分。将记录的时间写入到div中,div中起始时默认都是0
        function setTimeStr(){        
            // 赋值操作,将定时器,存储在全局作用域变量中
            // 此处只是赋值操作
            time = setInterval(function(){
                ms++;
                // 毫秒是10毫秒一增加
                // ms存储的数值如果达到100,就是1秒种了
                // 给秒单位进位  s++ 
                // ms本身需要重新开始记录数值
                // 0:0:0:99  ---> 0:0:1:00
                if(ms == 100){
                    s++;       // 秒进位
                    ms = 0;    // ms本身清零,重新记录
                }

                if(s == 60){
                    m++;       // 分钟进位 
                    s = 0;     // s秒 清零
                }

                if(m == 60){
                    h++;       // 小时进位 
                    m = 0;     // m分钟 清零
                }

                // 小时记录可以每24小时清零一次,或者100小时清零一次,都可以
                if(h == 100){
                    h = 0;
                }

                // 如果记录的时间小于0,要做补零操作
                if(ms < 10){
                    msStr = '0' + ms;
                }else{
                    msStr = ms;
                }

                if(s < 10){
                    sStr = '0' + s;
                }else{
                    sStr = s;
                }

                if(m < 10){
                    mStr = '0' + m;
                }else{
                    mStr = m;
                }

                if(h < 10){
                    hStr = '0' + h;
                }else{
                    hStr = h;
                }
                // 每次执行返回一个记录时间的字符串,将这个字符串写入到div中
                oDiv.innerHTML = `${hStr}:${mStr}:${sStr}:${msStr}`;
            } , 10);        
            console.log(time);
        }   
    </script>
</body>
</html>

在这里插入图片描述

你可能感兴趣的:(使用JavaScript做一个网页秒表(含开始、暂停、继续、重置功能))