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)); //规范化后显示秒    }}