js实现倒计时
Posted 带着蚂蚁去散步
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js实现倒计时相关的知识，希望对你有一定的参考价值。
实现要点：
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实现倒计时的主要内容，如果未能解决你的问题，请参考以下文章