如何实现JS 计时器

Question

如题所述

Answer 1

// html 
<div>当前时间为:<span id="timeNow"></span></div><br>
<button id="timeBegin">计时开始</button>
<button id="timeEnd">计时结束</button>
<button id="timeClear">计时清除</button>

// Javascript
<script type="text/javascript">
    //定义初始值 计时器
    var count = 0;
    var timer = "";
    //开始计时
    function BeginTime(){
        var beginBtn = document.getElementById("timeBegin");
        beginBtn.onclick = function(){
            timer = setInterval(function(){
                count ++ ;
                document.getElementById("timeNow").innerHTML = count / 100;
            },10)
        }
    }
    //结束计时
    function EndTime(){
        var endBtn = document.getElementById("timeEnd");
        endBtn.onclick = function(){
            clearInterval(timer);
        }
    }
    //计时清除
    function ClearTime(){
        var clearBtn = document.getElementById("timeClear");
        clearBtn.onclick = function(){
            document.getElementById("timeNow").innerHTML = "";
            count = 0;
        }
    }
    BeginTime();
    EndTime();
    ClearTime();
</script>

思路： 很简单

一个盒子来显示时间， 三个按钮控制时间 开始 、 结束、 归零

定义一个初始值和计时器，点开始计时器初始值不断增加，点结束停止计时器，点清除把时间盒子清空，初始值归零即可

记录生活的瞬间，分享学习的心得，感悟生活，留住感动，( www.jensonhui.com )  

Answer 2

可以用 setinterval方法