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

jq 倒计时的更多相关文章

  1. JS与JQ倒计时的写法

    页面需要制作一个倒计时的功能:然后度娘了一遍,找到两种写法,原生JS与JQ 的,经过测试原生JS在IE可能会有不刷新的现象所以结合了一个大神的JQ写法修改好了一个. 原生JS写法: HTML: < ...

  2. jq倒计时(代码)

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  3. js/jq 倒计时插件(一)

    //很多时候我们需要用到倒计时比如(一些发布会倒计时,秒杀倒计时,活动倒计时等),接下来将介绍两种倒计时插件的写法 //html结构 <!DOCTYPE html> <html la ...

  4. JQ倒计时天时分秒

    <div id="times_wrap" class="time_num"> 距离现在时间: <div class="time_w& ...

  5. jq倒计时

    var referTime = 5; setInterval("refer('#show')", 1000); function refer(obj){ if(referTime ...

  6. JQ倒计时,正计时

    <p class="lastP">距离二维码过期还剩<strong></strong>秒,过期后自动刷新页面.</p><scr ...

  7. js&jq 发送验证码倒计时

    <input  type="text"   name=''  id="btn"> //发送验证码倒计时var wait=30; function t ...

  8. jq 实现发送验证码倒计时功能

    var util = { wait:60, hsTime: function (that) { _this = this; if (_this.wait == 0) { $('#hsbtn').rem ...

  9. jq实现竞拍倒计时

    1jq的效果代码 //全局变量用于存储当前时间 var nows; function rightZeroStr(v) { ) { " + v; } return v + "&quo ...

随机推荐

  1. POJ 3903 Stock Exchange(LIS || 线段树)题解

    题意:求最大上升子序列 思路:才发现自己不会LIS,用线段树写的,也没说数据范围就写了个离散化,每次查找以1~a[i]-1结尾的最大序列答案,然后更新,这样遍历一遍就行了.最近代码总是写残啊... 刚 ...

  2. (zhuan) 大牛讲堂 | 算法工程师入门第二期-穆黎森讲增强学习

    大牛讲堂 | 算法工程师入门第二期-穆黎森讲增强学习 2017-07-13 HorizonRobotics

  3. Tutorial: Implementation of Siamese Network on Caffe, Torch, Tensorflow

    Tutorial: Implementation of Siamese Network with Caffe, Theano, PyTorch, Tensorflow  Updated on 2018 ...

  4. BZOJ 1143: [CTSC2008]祭祀river(二分图最大点独立集)

    http://www.lydsy.com/JudgeOnline/problem.php?id=1143 题意: 思路: 二分图最大点独立集,首先用floyd判断一下可达情况. #include< ...

  5. jquery 重要知识点总结

    jquery 重要知识点总结1.一组标签用一个ul来管理,每一个标签是ul中的一个li:标签下面的内容就是用div来管理2.跟在浮动元素(float)之后的元素会围绕着浮动元素,如果不希望有这种围绕, ...

  6. MySQL GROUP BY语句

    GROUP BY 语句根据一个或多个列对结果集进行分组 在分组的列上我们可以使用COUNT.SUM.AVG等函数 SELECT column_name,function(column_name) FR ...

  7. Pandas 基础(1) - 初识及安装 yupyter

    Hello, 大家好, 昨天说了我会再更新一个关于 Pandas 基础知识的教程, 这里就是啦......Pandas 被广泛应用于数据分析领域, 是一个很好的分析工具, 也是我们后面学习 machi ...

  8. Python安装常见问题:ModuleNotFoundError: No module named '_ctypes' 解决办法

    一般位于3.7以上版本编译安装时出错 缺少依赖包libffi-devel 在安装3.7以上版本时,需要一个新的libffi-devel包做依赖 解决方法: yum install libffi-dev ...

  9. python类与类的关系

    类与类之间的关系(依赖关系,大象与冰箱是依赖关系) class DaXiang: def open(self, bx): # 这里是依赖关系. 想执行这个动作. 必须传递一个bx print(&quo ...

  10. 面试题中关于String的常见操作

    题目1: 将用户输入的一段话,每个单词的首字母大写, 每个单词之间的空格调整为只有一个,遇到数字,将数字与后一个单词用下划线 "_" 进行连接 题目2:将 i @@ am @@@ ...