javascript中计时器的简单实现

大概就是这样子的计时器
大概是这个样子的
hmtl代码块

<span id="hour">00</span>
<span>:</span>
<span id="min">00</span>
<span>:</span>
<span id="sec">00</span>
<br>
<button id="start">开始</button>
<button id="pause">暂停</button>
<button id="reset">复位</button>

script代码块

//封装函数,方便读取使用html元素
function $(id){
        return document.getElementById(id);
    }
function doubleNum(n){
        if(n<10){
            return "0" n;
        }else{
            return n;
        }
    }
    var i = 0 ;
    var timer = null;
    window.onload=function(){
        //获取开始按钮
        $("start").onclick = function(){
            timer = setInterval(function(){
                i  ;
                $("sec").innerHTML = doubleNum(i`);
                $("min").innerHTML = doubleNum(parseInt((i/60)`));
                $("hour").innerHTML = doubleNum(parseInt(i/3600));
            },1000)
        }
        //获取暂停按钮
        $("pause").onclick = function(){
            clearInterval(timer);
        }
        //获取复位按钮
        $("reset").onclick = function(){
            i=0;
            $("sec").innerHTML = "00";
            $("min").innerHTML = "00";
            $("hour").innerHTML = "00";
        }
    }

好了,这样计时器的功能就实现了

发布了8 篇原创文章 · 获赞 3 · 访问量 2733

猜你喜欢

转载自blog.csdn.net/weixin_46067435/article/details/104184809