秒表（将开始与暂停合并成一个·解决上一个秒表点击多次开始时会出现计时加速的效果）

<!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>
<style>
    #div1 {
        width: 100px;
        height: 200px;
        border: 1px solid black;
        background-color: coral;
        margin:300px auto;
    }
    #div1 span{
        font-size: 22px;
    }
    #div1 button{
        width: 100px;
        margin-top: 20px;
        font-size: 16px;
        background-color: black;
        color: crimson;
    }
</style>
<script>

    function $(id){//方便绑定标签
        return document.getElementById(id);
    }

    var isruning = false;//先是没有⏲所以先置为false
    var i = 0;//总秒数
    var time = null//定义成全局变量方便后面的关闭定时器
    window.onload = function(){ //等其它加载完了，浏览器才开始加载js代码
      function startfunc(){
       time =  setInterval(function(){ //打开定时器
             i++;
        $("s").innerHTML = i%60;
        $("s").innerHTML = doublenumber( $("s").innerHTML);
         $("m").innerHTML = parseInt(i/60) %60;
         $("m").innerHTML = doublenumber( $("m").innerHTML);
         $("h").innerHTML = parseInt(i/3600);
         $("h").innerHTML = doublenumber( $("h").innerHTML);
         },1000);
         
     };
     function pausefunc() {
         clearInterval(time);//关闭计数器
     }

     $("start").onclick = function(){
         if(!isruning)//
         {
             $("start").innerHTML = "暂停";
             isruning = true;
             startfunc();
         }
         else
         {
             $("start").innerHTML ="开始";
             isruning =false;
             pausefunc();
         }
         
     }

     $("reset").onclick = function(){//复位将isrunning标识符置为false
        clearInterval(time);
        i = 0;//一定要将i（总秒数归零）
        isruning = false;
        $("s").innerHTML = '00';
        $("m").innerHTML = '00';
        $("h").innerHTML = '00';
     };

    }
    
    function doublenumber(n){//控制时间输出格式
        if(n>=0&&n<=9)
        return '0'+n;
        else
        return n;

    }
</script>
<body>
    <div id = "div1">
        <span id="h">00</span>
        <span id="m">00</span>
        <span id="s">00</span>
        <br/>
        <button id="start">开始</button>
        <button id="reset">复位</button>
    </div>
</body>
</html>

 

 　　　　开始静入界面图

 

 

  　　　　点击开始键后图

 

 

　　　　点击暂停键的图

 

 

 　　点击复位键的图

 

posted @ 2020-09-26 15:13  xxf2  阅读(298)  评论(0)    收藏  举报