您的位置：首页 > Web前端 > JavaScript

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

2013-01-03 19:51 721 查看

<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" onsubmit="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 onclick="doPause()" id="tid" disabled>暂停</button>
		<button onclick="doGo()" id="gid" disabled>继续</button>
	</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航