js 做的计时器，怎么输出00-00-00格式

Question

<script type="text/javascript">
var hour = 0, minute = 0, second = 0;
var t = 0;
var flag;function studyTime()
{
    hour=Math.floor(t/60/60);
    minute=Math.floor(t/60%60);
    second=Math.floor(t%60);
    if(hour<10){
hour = "0" + hour;
    }
    if(minute<10){
minute = "0" + minute;
    }
    if(second<10){
second = "0" + second;
    }
    
    document.getElementById('showtime').innerHTML=hour +":"+minute+":"+second;
  
    t = t + 1;
    flag = setTimeout("studyTime()", 1000);           
}
//终止学习计时器
function stopTime()
{
    clearTimeout(flag);
}
</script>

Answer 1

<div id="showtime"></div>
<script type="text/javascript">
    var hour = 0, minute = 0, second = 0;
    var t = 0;
    var flag;
    function padding(v) {//////////
        if (v.toString().length <= 1) return '0' + v;
        return v;
    }
    function studyTime() {
        hour = padding(Math.floor(t / 60 / 60));
        minute = padding(Math.floor(t / 60 % 60));
        second = padding(Math.floor(t % 60));
        document.getElementById('showtime').innerHTML = hour + "-" + minute + "-" + second;        t = t + 1;
        flag = setTimeout("studyTime()", 1000);
    }
    //终止学习计时器
    function stopTime() {
        clearTimeout(flag);
    }
    studyTime()
</script> 

Answer 2

這邊提一個很重要的觀念給樓主及1、2樓計時器不可以使用自己定義的變數去計時
哪怕只是瀏覽器忙錄了一下
這計時器的功能就只是裝飾用的
沒有準確度可言精準的作法請透過Date 物件
透過記錄timestamp 去計算時間的變動
詳細的技術流與程就交給版上潛水的各位神人來幫忙囉

Answer 3

言之有理：<div id="showtime"></div>
<script type="text/javascript">
var begin = new Date().getTime(),id = document.getElementById("showtime"),flag = true;
(function (){
    var t = (new Date().getTime() - begin)/1000,fun = arguments.callee;
    id.innerHTML = ("0"+Math.floor(t/3600)).slice(-2)+"-"+("0"+Math.floor(t/60%60)).slice(-2)+"-"+("0"+Math.floor(t%60)).slice(-2);
    flag && setTimeout(function(){fun()},100);
})();
//终止学习计时器
function stopTime() {
    flag = false;
}
</script>

Answer 4

po一個與js不相關的計時器
純css寫的： https://developer.mozilla.org/zh-TW/demos/detail/css3-stopwatch-without-javascript/launch

Answer 5

干嘛要把简单的事情弄复杂？<div id=showtime></div>
<input type=button value=on onclick=studyTime()>
<input type=button value=off onclick=stopTime()><script type="text/javascript">
var hour = 0, minute = 0, second = 0;
var t = 0;
var flag;function studyTime()
{
    hour = (Math.floor(t/60/60) + 100 + '').substr(1);
    minute = (Math.floor(t/60%60) + 100 + '').substr(1);
    second = (Math.floor(t%60) + 100 + '').substr(1);
    document.getElementById('showtime').innerHTML=hour +":"+minute+":"+second;
  
    t = t + 1;
    flag = setTimeout("studyTime()", 1000);           
}
//终止学习计时器
function stopTime()
{
    clearTimeout(flag);
}
</script>