关于倒计时的函数

<html>    
<head>    
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
<title>倒计时时钟</title>    
<style>    
body,div{margin:0;padding:0;}    
body{color:#fff;font:16px/1.5 \5fae\8f6f\96c5\9ed1;}    
#countdown{width:300px;text-align:center;background:#1a1a1a;margin:10px auto;padding:20px 0;}    
input{border:0;width:283px;height:50px;cursor:pointer;margin-top:20px;background:url(img/btn-1.png) no-repeat;}    
input.cancel{background-position:0 -50px;}    
span{color:#000;width:80px;line-height:2;background:#fbfbfb;border:2px solid #b4b4b4;margin:0 10px;padding:0 10px;}    
</style>    
<script>    
window.onload = function ()    
{    
	var oCountDown = document.getElementById("countdown");	
    
	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" : '';	
    
	};    
	function format(a)    
	{    
		return a.toString().replace(/^(\d)$/,'0$1')    
	}    
	function updateTime ()    
	{    
		var aSpan = oCountDown.getElementsByTagName("span");    
		var oRemain = aSpan[0].innerHTML.replace(/^0/,'') * 60 + parseInt(aSpan[1].innerHTML.replace(/^0/,''));    
		if(oRemain <= 0)    
		{    
			clearInterval(timer);    
			return    
		}    
		oRemain--;    
		aSpan[0].innerHTML = format(parseInt(oRemain / 60));    
		oRemain %= 60;    
		aSpan[1].innerHTML = format(parseInt(oRemain));    
	}    
}    
</script>    
</head>    
<body>    
<div id="countdown">    
	<span>01</span>分钟<span>40</span>秒    
	<input type="button" value="" />    
</div>    
</body>    
</html>

求解读上述三个函数，实在有点懵，尤其是input的点击事件中的两个三目运算，我试图改成if..else但是会有问题。

刺槐少女

浏览 1860回答 2

2回答

CodeManDSH

三元运算 : 条件？ true则执行： false 则执行；if-else : if( 条件 ){ true则执行; }else{ false则执行 }其实一样的。在 aInput.onclick 里面： 1、进行了判断是否input有className 如果空就启动定时器，不为空时清除定时器 timer 2、给input赋值className ，对应的值是：当前如果className空就赋值cancel,不空就赋值空。同时，定时器绑定的是updateTime( ) ： 1、获取了span标签，将两个span的中间内容取出并用正则替换，将开头的0替换成空，分钟*60+秒钟，就是一共几秒； 2、如果小于等于0，清楚定时器，return结束函数 3、继续执行的话，总秒自减，再利用format函数的正则替换，如果是一位数，则前面加上0再转string类型，int的话0开头输出又没了，format处理后返回给aSpan[0].innerHtml和aSpan[1].innerHtml；定时器每秒执行一次

北七哦

点击button时候出发onclick事件调用update（），然后update（）调用fomat（）。if else可以写啊，出现什么问题看一下

随时随地看视频慕课网APP