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