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