JS倒计时效果带暂停和继续

最新推荐文章于 2022-03-12 02:56:20 发布

梦康

最新推荐文章于 2022-03-12 02:56:20 发布

阅读量8.8k

点赞数 3

分类专栏： JS

JS 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<html>
	<head>
		<title>HTML DOM</title>
		<script type="text/javascript">
			var h=0,m=0,s=0;
			var mytime=null;
			//开始倒计时
			function doSubmit(){
				h=document.myform.hh.value;
				m=document.myform.mm.value;
				s=document.myform.ss.value;
				run();
				
				document.getElementById("sid").disabled=true;
				document.getElementById("tid").disabled=false;
				document.getElementById("gid").disabled=true;
				
				return false;
				
			}
			
			//执行倒计时
			function run(){
				//输出
				var hid = document.getElementById("hid");
				hid.innerHTML=(h<10?"0"+h:h)+":"+(m<10?"0"+m:m)+":"+(s<10?"0"+s:s);
				s--;
				if(s<0){
					s=59;
					m--;
					if(m<0){
						m=59;
						h--;
						if(h<0){
							alert('时间到！');
							return;
						}
					}
				}
				mytime = setTimeout("run()",1000);
			}
			
			//暂停
			function doPause(){
				if(mytime!=null){
					clearTimeout(mytime);
					mytime=null;
				}
				document.getElementById("tid").disabled=true;
				document.getElementById("gid").disabled=false;
			}
			
			//继续
			function doGo(){
				run();
				document.getElementById("tid").disabled=false;
				document.getElementById("gid").disabled=true;
			}
		</script>	
	</head>
	<body>
		<h2 style="color:red">HTML DOM 倒计时</h2>
		<form action="" name="myform" οnsubmit="return doSubmit()">
			时：<input type="text" size="6" name="hh"/>
			分：<input type="text" size="6" name="mm"/>
			秒：<input type="text" size="6" name="ss"/>
			<input type="submit" id="sid" value="开始"/>
		</form>
		<h2 id="hid"></h2>
		<button οnclick="doPause()" id="tid" disabled>暂停</button>
		<button οnclick="doGo()" id="gid" disabled>继续</button>
	</body>
</html>

梦康

关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
JS倒计时效果带暂停和继续

HTML DOM var h=0,m=0,s=0; var mytime=null; //开始倒计时 function doSubmit(){ h=document.myform.hh.value; m=document.myform.mm.value; s=document.myform.ss.value; run();
复制链接

扫一扫