打开页面开始倒计时

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
<title>javascript实现的倒计时时钟</title>
<script language="javascript">
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/,''));
//console.log(oRemain);//总共的时间
if(oRemain <= 0)
{
clearInterval(timer);
return;
}
oRemain--;
aSpan[0].innerHTML = format(parseInt(oRemain / 60));
oRemain %= 60;
aSpan[1].innerHTML = format(parseInt(oRemain));
}
// 加上此句即可。
aInput.click();
}
</script>
</head>
<body>
<div align="center" id="countdown">
<span>30</span>分钟<span>00</span>秒

<input type="button" value="开始" />
</div>
</body>
</html>

posted @ 2017-03-30 14:46  伊优  阅读(609)  评论(0编辑  收藏  举报