js做倒计时

<!DOCTYPE html>
<html>
	·<head>
	<meta charset="UTF-8">
	<title>倒计时</title>
	<style>
		div{
			margin-left: 400px;
			margin-top: 200px;
		}
	</style>
</head>
<body>
	<div id="">
	<input type="text" id="hours" value="24" style="width:30px;height: 30px;background: cadetblue;">:
	<input type="text"  id="mins" value="00"  style="width:30px;height: 30px;background: cadetblue;"/>:
	<input type="text"  id="seconds" value="00"  style="width:30px;height: 30px;background: cadetblue;"/>
	<input type="button"  id="begin_" value="开始"  onclick="begin()"/>
	<input type="button"  id="pause_" value="暂停"  onclick="pause()"/>
	<input type="button"  id="reset_" value="重置"  onclick="replacement()"/>
	</div>
</body>
</html>
<script type="text/javascript">
var hours = 23;
var mins= 59;
var seconds = 59;
var timing;
function begin(){
	//倒计时的开始
	 timing = setInterval(function(){
 	    	seconds--;
 	    	//秒钟到0，分钟减一
			if(seconds==0){
				mins--;
				seconds=59
				
				//分钟到零，小时减一
				if(mins==0){
					hours--;
					mins=59;
			}
		}

// 输出
document.getElementById(“hours”).value=hours<10?“0”+hours:hours;
document.getElementById(“mins”).value=mins<10?“0”+mins:mins;
document.getElementById(“seconds”).value=seconds<10?“0”+seconds:seconds;
},1000);
}

//倒计时的暂停
function pause(){
	clearTimeout(timing)
}


//倒计时的重置
function replacement(){
	clearTimeout(timing)
	var hours=24;
	var mins=0;
	var seconds=0;
	document.getElementById("hours").value=hours<10?"0"+hours:hours;
	document.getElementById("mins").value=mins<10?"0"+mins:mins;
	document.getElementById("seconds").value=seconds<10?"0"+seconds:seconds;
}
</script>

会飞得猪

发布了47 篇原创文章 · 获赞 22 · 访问量 1万+

私信关注

猜你喜欢