简单的三按钮倒计时器

最新推荐文章于 2025-02-13 21:38:47 发布

原创最新推荐文章于 2025-02-13 21:38:47 发布 · 1.4k 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

JavaScript

案例操作

简单的倒计时器

简介

我们会利用JS代码写一个倒计时，用三个按钮来控制数字的行动。
下面是代码部份

css代码

<style type="text/css">
			div{
				 width: 400px;
				 height: 100px;
				 font-size: 50px;
				 text-align: center;
				 line-height: 200px;
				 margin: 50px auto;
			}
			input{
				display: inline-block;
				font-size: 30px;
				background-color: #50B9FD;
				width: 100px;
				height: 50px;
				line-height: 50px;
				text-align: center;
				border-radius:10px ;
				color:#fff;
				border: 0px;
				
			}
			input:active{
				background: blueviolet;
			}
		</style>

分割线---------------------------------------------------------------------------------

html格式

设置3个按钮和一个数字区域，数字区域给一些文字，注意后两个按钮需要disabled以免误触。

<div id="text">
			开始倒数
		</div>
		<div>
		<input type="button" name="" id="start" value="开始" />
		<input type="button" name="" id="stop" value="暂停" disabled />
		<input type="button" name="" id="reset" value="重置" disabled />
		</div>

分割线---------------------------------------------------------------------------------

js代码

这里是最重要的部分，东西相对也比较多，让我们一步一步来。

1.先声明对应的id，然后在声明一个开关onOff = 1，然后设置一个num为初始值。当然，这个值可以随时变化。在设置一个计时器为null，用来控制事件。当然这里可以再声明一个变量，可以用来封装计时器

	var oText = document.getElementById("text");
		var oBtn = document.getElementById("start");
		var oBtn1 = document.getElementById("stop");
		var oBtn2 = document.getElementById("reset")
		var onOff = 1;	//默认为开启状态
		var num = 10;
		var timer = null;

2.设置设置点击事件，

oBtn.onclick =function(){
			//点击开始后，让两个按钮可以使用
			oBtn1.disabled=false; 
			oBtn2.disabled=false;
			oText.innerHTML = num;
			//判断开关是否处于默认状态，值为1
			if (onOff == 1) {
			//开启计时器，计时器分为两个部分，
			//前面的是一个回调函数，
			//后面的是时间，单位是毫秒
				 timer = setInterval(function(){	
						 num - -;
						oText.innerHTML = num;
						//如果数字到0，将会停止计时器，
						//可以设置一个值来增强用户体验
						if(num == 0){
							oText.innerHTML ="结束了";
							clearInterval(timer);
						}
				},1000)
			}
				onOff = 0; //将开关的值改变一下
			return timer;
		}

3.另外两个按钮的设置

		oBtn1.onclick =function(){
			clearInterval(timer);	//关闭计时器
			oText.innerHTML = num;
			onOff = 1;	//将开关设置为默认值
		}
		oBtn2.onclick =function(){
			num = 10;	//将值设为原始值
			oText.innerHTML = num;
			clearInterval(timer)
			onoff = 1;
		}

完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				 width: 400px;
				 height: 100px;
				 font-size: 50px;
				 text-align: center;
				 line-height: 200px;
				 margin: 50px auto;
			}
			input{
				display: inline-block;
				font-size: 30px;
				background-color: #50B9FD;
				width: 100px;
				height: 50px;
				line-height: 50px;
				text-align: center;
				border-radius:10px ;
				color:#fff;
				border: 0px;
				
			}
			input:active{
				background: blueviolet;
			}
		</style>
	</head>
	<body>
		<div id="text">
			开始倒数
		</div>
		<div>
		<input type="button" name="" id="start" value="开始" />
		<input type="button" name="" id="stop" value="暂停" disabled />
		<input type="button" name="" id="reset" value="重置" disabled />
		</div>
	</body>
	<script type="text/javascript">
		var oText = document.getElementById("text");
		var oBtn = document.getElementById("start");
		var oBtn1 = document.getElementById("stop");
		var oBtn2 = document.getElementById("reset")
		var onOff = 1;
		var num = 10;
		var timer = null;
		oBtn.onclick =function(){
			oBtn1.disabled=false;
			oBtn2.disabled=false;
			oText.innerHTML = num;
			if (onOff == 1) {
				 timer = setInterval(function(){	
						// arr.length - 1;
						num = num - 1;
						oText.innerHTML = num;
						if(num == 0){
							clearInterval(timer);
						}
				},500)
			}
				onOff = 0;
			return timer;
		}
		oBtn1.onclick =function(){
			clearInterval(timer);
			oText.innerHTML = num;
			onOff = 1;
		}
		oBtn2.onclick =function(){
			num = 10;
			oText.innerHTML = num;
			clearInterval(timer)
			onoff = 1;
		}
		
		
	</script>
</html>

标签

#计时器 #多按钮 #简单 #js