JS写周期性定时器（时间倒计时、获取验证码倒计时）

周期性定时器让网页自动运行，例如某bao网页的秒杀价倒计时。
下面要介绍的是时间倒计时和获取验证码的倒计时：
（两个功能我写到一个网页里了，其中部分代码都有详细的注解，在这里我就不再赘述）
在这里要提点的是： disabled属性只能适用于button标签
直接上代码！

HTML部分：
没有做样式修饰，因为主要是展现功能呀（不搞那么多花里胡哨的，哈哈哈哈哈）

       <h1 id="time"></h1>
		<button id="btn">获取验证码</button>

JS部分：

<script>
			//时间倒计时
			var time=document.getElementById("time");
			function clock(){
				//预期到达时间
				var target=new Date("2020-7-25 11:00:00");
				//现在时间
				var now=new Date();
				//时间的差值
				var ms=target-now;
				//当差值大于0时，可以计时；否则计时器停止计数，显示时间到了
				if(ms>0){
					var hour=Math.floor(ms/1000/60/60);
					//让时间数的单位能是两位数
					hour=hour<10?"0"+hour:hour;
					var minute=Math.floor((ms-hour*1000*60*60)/1000/60);
					minute=minute<10?"0"+minute:minute;
					var sencond=Math.floor((ms-hour*1000*60*60-minute*1000*60)/1000);
					sencond=sencond<10?"0"+sencond:sencond;
					time.innerHTML="距离2020年7月25号还有"+hour+"小时"+minute+"分钟"+sencond+"秒"
				}else{
					clearInterval(timer);
					time.innerHTML="时间到了~！"
				}
			}
			var timer=setInterval(clock,1000);
			//获取验证码倒计时
			var btn=document.getElementById("btn");
			var n=60;
			function clock_code(){
				if(n>0){
					//disabled属性点击按钮之后不可点击
					btn.setAttribute("disabled",true);
					n--;
					btn.innerHTML=n+"秒后重新获取";
				}else{
					btn.removeAttribute("disabled");
					clearInterval(timer_code);
					btn.innerHTML="获取验证码";
					//初始化时间
					n=60;
				}
			}
			var timer_code=null;
			//点击按钮的时候才开始倒计时
			btn.onclick=function(){
				timer_code=setInterval(clock_code,1000);
			}
		</script>

里面都有注释的啦~

效果图：

分别是7月25号的倒计时，当到达预期时间的时候将会显示“时间到啦”；然后就是验证码的倒计时啦(这里设置的是60秒)~

到此我的分享就结束啦，总会有不足的地方，多多包涵啦，我会加油努力去改正!