fgm实例练习笔记-3.9倒计时

clearInterval() 方法可取消由 setInterval() 设置的 timeout。clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。语法：clearInterval(id_of_setinterval)

自己写的功能不全，当时间倒计时为0时，停不下来，还会一直减成负数。在注释里加了一行判断，当全为0的时候clearInterval()即可。

自己写的减时间方法，是把秒和分分开计算，秒减到0时分减1，并让秒恢复到60。这个思路需要写更多的if判断，有点乱。原版是先把分*60，全部按秒算，当所有的秒都等于0（也就是计时结束）的时候，clearInterval()退出即可。全部的秒/60再取整为分，%60取余为秒。

自己的用了很多if很混乱，有点找不清楚if和else的对应关系。部分可以改成？: 。并且多建立几个外部函数，调用起来方便好写。

自己写的思路：

<script>
window.onload = function(){
    var minu = document.getElementsByTagName("span")[0];
    var sec = document.getElementsByTagName("span")[1];
    var btn = document.getElementsByTagName("input")[0];
    var timer = null; //初始化null

    btn.onclick = function(){
    if (btn.className == "start") //先判断按钮决定是启动还是暂停，再执行不同的操作
    {
    btn.className = "concel";
    btn.value = "CONCEL"; 

    timer = setInterval(change,1000);   //timer就是setInterval(),不用的时候clearInterval(timer)
    function change() {     
    var sec1= parseInt(sec.innerHTML)-1;    //秒自减1

    if (sec1 < 0) {

    /*if (parseInt(minu.innerHTML) <=0 && parseInt(sec.innerHTML) <=0){clearInterval(timer);return};补上这行就能解决减成负数的问题了。*/

    minu.innerHTML = (parseInt(minu.innerHTML)-1); //分在秒<0时-1，但没有控制分为0时结束
    sec.innerHTML = "60";} //秒<0时复位

    else
    {
    sec.innerHTML = sec1;}  //秒>=0时正常写入，分不用变化
    }
    }

    else 
    {
    btn.className = "start";//暂停的时候，按钮复位
    btn.value = "START"; 
    clearInterval(timer);//暂停了就必须必须取消setInterval(),少了这一句的话setInterval()还会运行，再次onclick就会运行两个setInterval(),计时出错越来越快
}
}
};
</script>

---

原版：

window.onload = function ()
{
    var oCountDown = document.getElementById("countdown");  //整个div
    var aInput = oCountDown.getElementsByTagName("input")[0]; //按钮
    var timer = null;

    aInput.onclick = function ()
    {
        this.className == "" ? (timer = setInterval(updateTime, 1000), updateTime()) : (clearInterval(timer)); //如果按钮是启动，运行计时函数；如果按钮是暂停，运行中止计时函数
        this.className = this.className == '' ? "cancel" : '';  
    };//让启动按钮变成暂停按钮，暂停按钮变成启动按钮

    //以上这些，对应上面版本中，btn.onclick事件下，最外层的if else

    function format(a)
    {
        return a.toString().replace(/^(\d)$/,'0$1')
    }//format函数负责在个位数前添加0，规范化

    function updateTime ()
    {
        var aSpan = oCountDown.getElementsByTagName("span");//获取分、秒
        var oRemain = aSpan[0].innerHTML.replace(/^0/,'') * 60 + parseInt(aSpan[1].innerHTML.replace(/^0/,'')); //先去掉分和秒前面的0，再将分*60转化为秒，和秒相加。赋值给oRemain

        if(oRemain <= 0)//判断oRemain是否为零，即计时结束。
        {
            clearInterval(timer);//结束了就清除计时
            return
        }

        oRemain--; //全部的秒，自减1
        aSpan[0].innerHTML = format(parseInt(oRemain / 60)); //全部的秒除/60再取整数，即当前的分，再执行format()规范格式，再显示
        oRemain %= 60; //oRemain取余数，就是当前的秒
        aSpan[1].innerHTML = format(parseInt(oRemain)); //规范化后显示秒
    }
}