标签:ack func 计时器 lan 计时 border date() utf-8 disabled
实现要点:
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>
标签:ack func 计时器 lan 计时 border date() utf-8 disabled
原文地址:https://www.cnblogs.com/whs5280/p/9742029.html