震惊!js制作秒表操作 媲美卡西欧

89 阅读1分钟

以下是具体操作

<div>00:00:00</div>
<button>开始</button>
<button>暂停</button>
<button>重置</button>

<script>
    // 获取标签对象
    var oDiv=document.querySelector('div');
    //1 2 3代表开始 停止 重置按钮
    var oBtn1=document.querySelectorAll('button')[0];
    var oBtn2=document.querySelectorAll('button')[1];
    var oBtn3=document.querySelectorAll('button')[2];

    // 定义开关变量
    var flag=true;

    // 设置变量存储 时分秒
    var s=0;
    var m=0;
    var h=0;

    //设置变量存储定时器的id
    var time=0;

    // 给开始按钮添加点击事件
    oBtn1.addEventListener('click',()=>{

        // 点击之后关闭开关变量
        flag=false;

        // 设置定时器
        time=setInterval(()=>{
            // 设置秒递增状态
            s++;
            // 当秒等于60的时候 使分钟加1 秒数归零
            if(s === 60){

                m++;

                s=0;
            }

            // 当分钟等于60的时候 使小时加1 分钟归零
            if(m === 60){

                h++;

                m=0;
            }

            // 将时间写入标签  采用三元运算符 不足十秒钟进行补零操作
            oDiv.innerHTML=`${h>10?h:'0'+h}:${m>10?m:'0'+m}:${s>10?s:'0'+s}`


        },1000)
    });

    // 给暂停按钮添加点击事件
    oBtn2.addEventListener('click',function(){

        // 开关变量的状态设置为开启
        flag=true;
        // 清除开始按钮里面的定时器
        clearInterval(time);
    })

    // 给重置按钮添加点击事件
    oBtn3.addEventListener('click',function(){

        oDiv.innerHTML='00:00:00';
    })

    
</script>

这样就完成制作秒表的操作了

总有些不想写代码的日子,因为总有事情比写代码更重要的事,比如楼外的蒹葭,比如今晚的月色