• 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> 
  • 相关阅读:
    菜鸟学IT之豆瓣爬取初体验
    菜鸟学IT之python网页爬取多页爬取
    菜鸟学IT之python网页爬取初体验
    菜鸟学IT之python词云初体验
    菜鸟学IT之python3关于列表,元组,字典,集合浅认识!
    整合ssm框架
    MyBatis
    服务出现服务名无效的原因及解决方法
    数据库(三)
    数据库(二)
  • 原文地址:https://www.cnblogs.com/xiaoxiao2017/p/10374711.html
Copyright © 2020-2023  润新知