网站活动秒杀倒计时

今天做移动端商城时候得，需要哥秒杀计时器，从后台获取了时间以后，前台做相应的判断。需要的可以直接拿去用，本人只精确到了x天x小时x分钟x秒。
其他需要可以自行添加。
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
       .setting-time{
           display: none;
       }
        .time{
            width: 80%;
            height: 100px;
            margin: 0 auto;
            background: black;
            color: #fff;
            display: flex;
            justify-content: space-between;
        }
        .time span{
            width:25%;
            height: 100%;
            font-size: 20px;
            line-height: 100px;
            text-align: center;
        }

    </style>
</head>
<body>
    <!--模拟后台取回来的数据，格式为30日12点0时0分，如需年月日，可以自己添加-->
    <div class="setting-time">
        <div class="last_d">30</div>
        <div class="last_h">12</div>
        <div class="last_f">0</div>
        <div class="last_s">0</div>
    </div>
    <!--倒计时时间-->
    <div class="time">
        <span id="t_day"></span>

        <span id="t_hour"></span>

        <span id="t_minute"></span>

        <span id="t_second"></span>
    </div>

</body>
<script src="https://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
<script>
    function timeDown(){
        //当前时间
        var myDate = new Date();
        var date=myDate.getDate()*24*60*60;  //获取日期
        var h=myDate.getHours()*60*60;  //获取当前小时数(0-23)
        var m=myDate.getMinutes()*60;   //获取当前分钟数(0-59)
        var s=myDate.getSeconds()*1;      //获取当前秒
        var now=date+h+m+s;//当前时间总秒数
        //后台设置时间
        var day2=$(".last_d").text()*24*60*60;   //获取设置的天 比如28日
        var xs=$(".last_h").text()*60*60;        //获取设置的小时
        var fz=$(".last_f").text()*60;           //获取设置的分钟
        var mz=$(".last_s").text()*1;            //获取设置的秒
        var last=day2+xs+fz+mz;                  //后台设置时间的总秒数

        var limit_time=last-now;                 //计算差

        var day=Math.floor(limit_time/60/60/24); //换算成正常日期
        var hour=Math.floor(limit_time/60/60%24);
        var minutes=Math.floor(limit_time/60%60);
        var  seconds=Math.floor(limit_time%60);
        $("#t_day").html(day+"天"); /*写到页面中*/
        $("#t_hour").html(hour+"时");
        $("#t_minute").html(minutes+"分");
        $("#t_second").html(seconds+"秒");
        if(limit_time==10){
            alert("提醒，还有10秒结束");
        }
        --limit_time;
        window.name=limit_time;//记录当前时间。
    }
    timer=setInterval("timeDown()",1000);//设置定时器，1秒钟执行一次timeDown()函数；
    
</script>
</html>

转载来源于：https://www.cnblogs.com/LonJin/p/9372918.html
网站活动秒杀倒计时

猜你喜欢
