实现要点:
1. 思路:抢购时间 - 现在时间,用 getTime() 得到时间【单位为毫秒】,再转换为标准时间
2. 用 setInterval() 方法来实现倒计时,当时间为0时,清除计时器
3. 设置按钮的属性为禁用,时间到了清除 disabled 属性
4. 将时间通过 innerHTML 属性显示在p标签上
5. 实际项目中,计时器的抢购时间必须以服务器上为准
代码:
<!DOCTYPE html><html><head lang="en"> ???<meta charset="UTF-8"> ???<title></title> ???<style type="text/css"> ???????#test{width:100px;height:30px;margin:0;padding:0;border-radius:8px;} ???</style></head><body> ???<p>倒计时秒杀活动</p> ???<p id="time"></p> ???<button id="test" disabled="disabled">开始抢购</button> ???<script> ???????function doClick(){ ???????????alert(‘恭喜你抢购成功‘); ???????} ???????function doTime(date){ ???????????var btn = document.getElementById(‘test‘); ???????????var p = document.getElementsByTagName(‘p‘)[1]; ???????????var endTime = new Date(date); ???????????var nowTime = new Date(); ???????????var leftTime = endTime.getTime() - nowTime.getTime(); ??//得到的是毫秒 ???????????var day,hour,minute,second = 0; ???????????if(leftTime > 0){ ???????????????day = Math.floor(leftTime/1000/60/60/24); ???????????????hour = Math.floor(leftTime/1000/60/60%24); ???????????????minute = Math.floor(leftTime/1000/60%60); ???????????????second = Math.floor(leftTime/1000%60); ???????????????p.innerHTML = ?hour + "时" + minute + "分" + second + "秒"; ???????????}else{ ???????????????clearInterval(t); ???//清除定时计 ???????????????btn.removeAttribute(‘disabled‘); ??????????????????btn.setAttribute(‘style‘,‘background-color: red;color: white‘); ?????????????????btn.setAttribute(‘onclick‘,‘doClick()‘); ???????????} ???????} ???????var t = setInterval(function(){ ???????????doTime(‘2018/10/4 13:00:00‘); ???//此处设置的是抢购时间,以服务器为准 ???????},0); ???</script></body></html>
js实现倒计时
原文地址:https://www.cnblogs.com/whs5280/p/9742029.html