周期性定时器让网页自动运行,例如某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秒)~
到此我的分享就结束啦,总会有不足的地方,多多包涵啦,我会加油努力去改正!