JavaScript实现简单计时器

2022-08-19 13:16:54

计时器

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>计时器</title><style>.bigDiv{margin: 50px auto;width: 200px;height: 200px;background-color: lightskyblue;border-radius: 10px;}#showNum{width: 200px;height: 20px;background-color: orange;text-align-all: center;border-radius: 5px;}</style></head><body><divclass="bigDiv"><h2align="center">计时器</h2><divid="showNum"align="center">
        0</div><br><br><divclass="butDiv">&nbsp&nbsp&nbsp&nbsp<buttontype="button"id="start">开始</button>
        &nbsp<buttontype="button"id="stop">停止</button>
        &nbsp<buttontype="button"id="reset">复位</button>
        &nbsp</div></div><script>//定义显示的时间let int=null;/**
     * 开始  单击事件
     */
    document.getElementById("start").addEventListener('click',function(){if(int==null){//设置定时器//每隔参数二毫秒执行一次参数一
            int=setInterval(startNum,1000);}});/**
     * 停止   单击事件
     */
    document.getElementById("stop").addEventListener('click',function(){//清除定时器，clearInterval(int);
        int=null;});/**
     * 复位    单击事件
     */let num=0;
    document.getElementById("reset").addEventListener('click',function(){if(int==null){
            num=0;//将时间变成0
            document.getElementById("showNum").innerHTML= num;}});functionstartNum(){
        num++;//持续改变时间
        document.getElementById("showNum").innerHTML= num;}</script></body></html>
  • 作者：妄痴梦中
  • 原文链接：https://blog.csdn.net/an_gentle_killer/article/details/117930089
    更新时间：2022-08-19 13:16:54