引入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>