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>

 

posted @ 2018-10-04 12:50  带着蚂蚁去散步  阅读(335)  评论(0)  编辑  收藏  举报