商城倒计时代码

最新推荐文章于 2024-09-08 06:15:00 发布

paranoidMao

最新推荐文章于 2024-09-08 06:15:00 发布

阅读量1k

点赞数

分类专栏： demo

本文链接：https://blog.csdn.net/web_yzm/article/details/81507371

版权

demo 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商城倒计时</title>
    <style>
        *{margin: 0px;padding: 0px}
        body{width: 100%;height: 100%;background: #333;}
        .box{width:200px;height:280px;margin: 0 auto;background: url("../image/countdownBg.png") no-repeat center;background-size: 100% 100%;margin-top:100px}
        .countDown{padding:20px 0}
        .countDown .title{font-size:34px;color: #ffffff;text-align: center}
        .countDown .titleEn{font-size: 20px;text-align: center;color: rgba(255,255,255,0.3);}
        .countDown .bolt{width: 20px;height: 35px;background: url(../image/bolt.png) no-repeat center;margin: 20px auto;}
        .countDown .countDownOver{font-size: 16px; text-align: center;color: #ffffff;}
        .countDown .countDownTime {width: 175px;height: 40px;background: url(../image/countDownTime.png) no-repeat center; margin: 20px auto 0 auto;}
        .countDown .countDownTime p { font-size: 26px;color: #ffffff;font-weight: bold; float: left;width: 40px;height: 40px;text-align: center;line-height: 40px;margin-right: 5px;}
        .countDown .countDownTime p:last-child{margin-right: 0px}
    </style>
</head>
<body>
<div class="box">
    <div class="countDown">
        <h1 class="title">阳光采购</h1>
        <p class="titleEn">FLASH DEALS</p>
        <div class="bolt"></div>
        <p class="countDownOver"></p>
        <div class="countDownTime clearfix"></div>
    </div>
</div>
</body>
<script src="../js/jquery-2.2.4.min.js"></script>
<script>
//    注意的坑
//    1.当前的时间获取一次,是一个定值，必须使用定时器才能时刻变化当前的时间。所以要以参数的形式传进去
//    2.给出的时间格式  参数有5种
        //new Date("month dd,yyyy hh:mm:ss");
        //new Date("month dd,yyyy");
        //new Date(yyyy,mth,dd,hh,mm,ss);
        //new Date(yyyy,mth,dd);
        //new Date(ms);
//    3.从后台拿到的数据一般为字符串，时间格式不支持
//        1.如果是时间戳的话，可以使用 number和parseInt进行转换
//        2.如果是2009-6-28 15:23格式，可以使用正则进行转换，str.replace(/-/g,"/") <解释：/-/g 是正则表达式表示将所有短横线-替换为斜杠/其中g表示全局替换>
//    4.veracityTime 时间差，如果想要精确的时间控制，是不能依赖于JavaScript的setTimeout或者setInterval函数的
//    5.setInterval()是在每隔指定的毫秒数循环调用函数或表达式，直到clearInterval把它清除，所以当我们定时器设置之后，当不需要进行定时器的时候，则用clear进行清空定时器。
    $(function () {
        var start_time=new Date("2018","7","8","14");   //开始的时间 月份只有0-11，所以要减一；
        var end_time=new Date("2018","7","8","14");     //结束的时间
        function lastTime(times,nowTime) {              //将时间进行换算  times指的是时间开始时间或结束时间，nowTime只的是当前的时间
            var differenceTime=-480-nowTime.getTimezoneOffset();   //北京时间和地区的时间差，一般为0
            var leftTime=(times.getTime()-nowTime.getTime()+differenceTime*60000);  //相差的时间戳
            var day=Math.floor(leftTime/(1000*60*60*24));
            var hour = Math.floor(leftTime / (1000 * 3600)) - (day * 24);
            var minute = Math.floor(leftTime / (1000 * 60)) - (day * 24 * 60) - (hour * 60);
            var second = Math.floor(leftTime / (1000)) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
            $('.countDownTime').html('<p class="day">'+(day<10?"0"+day:day)+'</p><p class="hour">'+(hour<10?"0"+hour:hour)+'</p><p class="minute">'+(minute<10?"0"+minute:minute)+'</p><p class="second">'+(second<10?"0"+second:second)+'</p>')
        }
        function setLeftTime() {
//          开始时间肯定比结束时间小  所以就没做判断
            var now_Time=new Date(); //当前时间应该随时变化，用定时器进行刷新
            var veracityTime=now_Time.getMinutes() + ':' + now_Time.getSeconds() + ':' + now_Time.getMilliseconds();
            console.log(veracityTime);//使用定时器计算毫秒数  验证js的准确性
            if(now_Time<start_time){  //当现在的时间小于开始的时间
                $('.countDownOver').html("距离抽奖还有");
                lastTime(start_time,now_Time)
            }else if(now_Time<end_time){//当现在的时间大于开始的时间小于现在结尾的时间
                $('.countDownOver').html("距离抽奖结束还有");
                lastTime(end_time,now_Time)
            }else {  //当现在的时间大于结束的时间，说明活动结束。
                $('.countDownOver').html("敬请期待");
                lastTime(now_Time,now_Time);
                clearInterval(i);
            }
        }
        setLeftTime();
        var i=setInterval(setLeftTime,1000)
    });
</script>
</html>