js限时抢购计时器

最新推荐文章于 2024-07-30 10:56:44 发布

Summer_water

最新推荐文章于 2024-07-30 10:56:44 发布

阅读量2.8k

点赞数 1

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/Summer_water/article/details/51982282

版权

javascript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

倒计时代码一般用于限时抢购、节日及重大活动的倒计时，在网上经常见到，唯一不足之处就是不能限制客户端时间，如果客户端时间不准确，那么倒计时也就不准确了。
不多说直接代码。。。


    <!doctype html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>限时抢购</title>
<style type="text/css">
    #box{
        width: 600px;
        height: 400px;
        background: #eeeeee;
        margin: 0 auto;
        line-height: 400px;
        text-align: center;
        position: relative;
    }
    h2{
        position: absolute;
        z-index: 2;
        left: 40%;
        top: 20%;
        margin-left: 90px;
    }
</style>
</head>
<script type="text/javascript">
    window.onload=function(){
        show();
        function show(){
        var startTime=new Date();
        var endTime=new Date("2016/7/21,14:44:55")
        var leaveTime=parseInt((endTime.getTime()-startTime.getTime())/1000);
        var d=parseInt(leaveTime/(24*60*60));
        console.log(h)
        var h=parseInt(leaveTime/(60*60)%24);
        var m=parseInt(leaveTime/60%60);
        var s=parseInt(leaveTime%60);
        m=cleartime(m)
        h=cleartime(h)
        s=cleartime(s)
        document.getElementById("box").innerHTML=d+"天"+h+"小时"+m+"分钟"+s+"秒";
        setTimeout(show,1000)
            if (leaveTime<=0) {    //判断倒计时是否结束
            document.getElementById("box").innerHTML="团购结束"
        };
        }
        function cleartime(i){                
            if (i<=10) {
                i="0"+i
            }
                return i    
            }
    }   
</script>
<body>
   <h2>倒计时</h2>
   <div id="box">

   </div>
</body>
</html>

Summer_water

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js限时抢购计时器

倒计时代码一般用于限时抢购、节日及重大活动的倒计时，在网上经常见到，唯一不足之处就是不能限制客户端时间，如果客户端时间不准确，那么倒计时也就不准确了。不多说直接代码。。。 <!doctype html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>限时抢答</
复制链接

扫一扫

专栏目录