首页> 基础笔记 >JS/JQ基础学习 >经典案例 经典案例
JavaScript实例：简单倒计时
作者：小萝卜 2023-03-21 【 javascript 】 浏览 353
简介JavaScript实例：简单倒计时
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>JavaScript实例</title>
</head>
<body>
<h2>JavaScript实例：简单倒计时</h2>
<form action="#" name="myform">
数值：<input type="text" size="6" name="num"/><br/><br/>
<input type="button" id="b1" onclick="doStart()" value="开始"/>
<input type="button" id="b2" onclick="doStop()" value="暂停"/>
<input type="button" id="b3" onclick="doRun()" value="继续"/>
</form>
<div style="font-size:25px;" id="did"></div>
<script type="text/javascript">
//获取div节点对象
var did = document.getElementById("did");
var b1 = document.getElementById("b1");
var b2 = document.getElementById("b2");
var b3 = document.getElementById("b3");
//禁用暂停和继续按钮
b2.disabled=true;
b3.disabled=true;
var mytime=null; //倒计时句柄
var m=0; //倒计时数
function doStart(){
//获取定时值
m = parseInt(document.myform.num.value);
running();//开始
b1.disabled=true;
b2.disabled=false;
b3.disabled=true;
}
function running(){
m--;
did.innerHTML=m;
if(m>0){
mytime = setTimeout("running()",100);
}
}
//暂停
function doStop(){
if(mytime!=null){
clearTimeout(mytime); //清除定时
mytime=null;
}
b1.disabled=false;
b2.disabled=true;
b3.disabled=false;
}
//继续
function doRun(){
b1.disabled=true;
b2.disabled=false;
b3.disabled=true;
running();
}
</script>
</body>
</html>
很赞哦！ (0)
