简单的三按钮倒计时器

水深无声 2024-04-17 05:40 85阅读 0赞

# 简单的倒计时器 #

## 简介 ##

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

## css代码 ##

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

## html格式 ##

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

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

## 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>