zoukankan      html  css  js  c++  java
  • jq 倒计时

    引入jq
    注   在IE和safari 如果时间出现NAN  将时间格式改为YYYY/MM/DD HH:MM:SS 
    例:var d2 = new Date("2019/02/18 15:59");
    <!--倒计时5天-->
                <div class="startedDay">
                    <p class="count_down">距离直播开始还有</p>
                    <p class="count_down_time"><span class="day"></span></p>
                </div>
    
                <!--倒计时29分15秒-->
                <div class="startedHouse">
                    <p class="count_down">距离直播开始还有</p>
                    <p class="count_down_time"><span  class="minutes-seconds" style="font-size: 24px"></span></p>
                </div>
    
                <!--精彩直播即将开始-->
                <div class="startBox  ">
                    <p class="start">精彩直播</p>
                    <p class="start">即将开始</p>
                </div>
    
                <!--直播已经开始-->
                <div class="startedBox  ">
                    <p class="started">直播已经开始</p>
                    <img src="img/img-start.png" class="img_start" alt="">
                </div>
    <script type="text/javascript">
        var timer = null;
        $(document).ready(function () {
            //开启定时器
            timer = setInterval(show,100);
            //回调函数
            function show(){
                $(".startedDay,.startedHouse,.startBox,.startedBox").hide();
                var d1 = new Date();//获取到当前的时间
                var d1Ms = d1.getTime();
                var d2 = new Date("02 20,2019 14:28");//预计开始的时间02 15,2019 08:00
                var d2Ms = d2.getTime();
                var differMs = d2Ms-d1Ms;//相差的毫秒数
                var date = parseInt(differMs/(3600*24*1000));//
                var hours = parseInt((differMs%(3600*24*1000))/(3600*1000));//1小时=3600s
                var minutes =parseInt((differMs%(3600*1000))/(60*1000));//分钟
                var seconds = parseInt((differMs%(60*1000))/1000);//
                var ms = differMs%1000;//毫秒
                //当前分秒为个位数字时,对其进行的处理
                hours = hours<10?"0"+hours:hours;
                minutes = minutes<10?"0"+minutes:minutes;
                seconds = seconds<10?"0"+seconds:seconds;
                $(".day").text(date);//相差天数
                $(".minutes-seconds").text(hours+"小时"+minutes+""+ seconds+"");//直播即将开始
                if( date != 0 ){ //相差天数
    
                    $(".startedDay").show()
                }else if(date == 0  ){ //相差时分秒
                    $(".startedHouse").show()
                }
                if( differMs >= 5020  && differMs <= 20){//直播即将开始
                    $(".startedDay,.startedHouse,.startedHouse p,.startedBox").hide();
                    $(".startBox").show();
                }else if( differMs < 0){ //直播已经开始
                    $(".startedDay,.startedHouse,.startedHouse,.startedHouse p").hide();
                    $(".startedBox").show()
                }
    //          document.getElementById("day").innerHTML = date+"天"+hours+"小时"+ minutes+"分"+ seconds+"秒";
                console.log(differMs)
            }
        });
    </script> 
  • 相关阅读:
    【hdu 4135】Co-prime
    【cdoj 1544】当咸鱼也要按照基本法
    【SRM 717 DIV2 C】DerangementsDiv2
    【codeforces 821E】Okabe and El Psy Kongroo
    【SRM 717 div2 B】LexmaxReplace
    【SRM 717 div2 A】 NiceTable
    Network architecture for minimalistic connected objects
    C# 委托的理解
    50条超精辟的经典语录:哗众,可以取宠,也可以失宠!
    50条超精辟的经典语录:哗众,可以取宠,也可以失宠!
  • 原文地址:https://www.cnblogs.com/xiaoxiao2017/p/10374711.html
Copyright © 2011-2022 走看看