定时器

1、定时器简单应用

	<style type="text/css">            
		#box{                
			width: 150px;                
			height: 150px;                
			background: red;                
			border-radius: 50%;                
			text-align: center;                
			line-height: 150px;                
			color: white;                
			font-weight: bold;                
			margin: 20px;                
			font-size: 30px;            
		}        
	</style>

		<button id="btn">倒计时开始</button>        
		<div id="box">            
		5        
		</div>

	<script type="text/javascript">                
		//倒计时        
		var btn = document.getElementById("btn");        
		var box = document.getElementById("box");                

		btn.onclick = function(){            
			//获取box内容            
			var num = Number(box.innerText);//直接获取文本            
			var timer = setInterval(function(){                
				num--;                
				box.innerText = num;                
				//当前num为0时，时间到                
				if(num === 0){                    
					//清除定时器                    
					clearInterval(timer);                    
					setTimeout(function(){                        
						box.innerText = "GO";                    
					},500)                
				}            
			},1000);
		}
	</script>

2、商品活动倒计时

		<h1 id="showTime"></h1>

	//商品活动倒计时        
	//活动结束日期        
	//当前时间        
	//获取时间差        
	//根据时间差计算天，时，分，秒        
	//把天，时，分，秒显示在页面        
	//用定时器控制秒。 
	               
	//获取元素        
	var showTime = document.getElementById("showTime");        
	//结束日期        
	var endDate = new Date("2020/10/20 20:53:40");//直接写死        
	//当前时间        
	var nowDate = new Date();        
	//时间差   调用获取时间差函数⭐⭐⭐需要调用js时间差        
	var s = parseInt(getDifTime(nowDate,endDate));                

	//初始化页面内容。        
	init(s);//⭐⭐                
	function init(s){            
		if(s <= 0){                
			showTime.innerHTML = "商品活动时间已结束";                
			return;            
		}            
		//根据时间差的秒数来计算天，时，分，秒            
		var hours = s / 60 / 60;            
		//console.log(d);            
		//hours/24:1.9791626041666666            
		var d = parseInt(hours/24);            
		var h = parseInt((hours/24 - d) * 24);//⭐⭐            
		var f = parseInt(((hours/24 - d) * 24 - h) * 60);            
		var m = parseInt((((hours/24 - d) * 24 - h) * 60 - f) * 60);                        
		showTime.innerHTML = "距离商品活动结束还剩"+d+"天" + h + "时"+f+"分"+m+"秒";//⭐                    
	}                        
		//定时器控制秒                
		var timer = setInterval(function(){            
			s--;            
			console.log(s);            
			if(s <= 0){                
				showTime.innerHTML = "商品活动时间已结束";                
				//清除定时器                
				clearInterval(timer);                
				return;            
			}            
			init(s);
		},1000);