jQuery教程网站活动秒杀倒计时实现详解-职坐标

jQuery教程网站活动秒杀倒计时实现详解

沉沙 2018-09-17 来源：阅读 625 评论 0

摘要：本篇教程介绍了jQuery教程网站活动秒杀倒计时实现详解，希望阅读本篇文章以后大家有所收获，帮助大家对jQuery的理解更加深入。

本篇教程介绍了jQuery教程网站活动秒杀倒计时实现详解，希望阅读本篇文章以后大家有所收获，帮助大家对jQuery的理解更加深入。

<!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>
    
    <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>