码迷,mamicode.com
首页 > Web开发 > 详细

js实现倒计时

时间:2018-10-04 13:21:53      阅读:202      评论:0      收藏:0      [点我收藏+]

标签: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>

 

js实现倒计时

标签:ack   func   计时器   lan   计时   border   date()   utf-8   disabled   

原文地址:https://www.cnblogs.com/whs5280/p/9742029.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!