倒计时——从10倒数到0,点击按钮会还原倒计时
<body>
<!-- 将textvalue值设为10,从10倒数 -->
<input type="text" value="10" id="txt">
<input type="button" value="重新开始" id="btn">
</body>
<script>
var oT = document.getElementById("txt");
var oB = document.getElementById("btn");
var timer;
//封装一个开始倒数的函数
function start(){
//开启计时器,每秒text框中的数值自减1
timer = setInterval(function(){
oT.value--;
//当text框中的数值为0时,停止计时器
if(oT.value<=0){
clearInterval(timer);
}
},1000)
}
//封装一个清楚延时器的函数
function stop(){
clearTimeout(timer);
}
//当网页加载完毕时的行为如下
window.onload = function(){
//只要text里面的数值还未到0,则不停地以每秒减一的速度进行着
if(oT.value>0){
start();
//一旦清零,就停止
}else{
stop();
}
}
//当点击按钮时的行为
oB.onclick = function(){
//此处要设清除计时器,否则中断text倒数后的重新倒数将会加速,甚至会递减到负值
clearInterval(timer);
//点击按钮后,无论text中的数值时多少,都变为10
oT.value = 10;
//重复上面函数的行为
if(oT.value>0){
start(); }else{
stop();
}
}
</script>