引入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. thinkphp留言板开发笔记 1 - 新的

    关于php数组的排序函数的总结: 有很多种排序方式和排序规则: 正常排序和反向排序, 使用 -r来表示 排序时是否考虑索引/下标, 如果考虑则加上-a, a=associate. sort是按值来排序 ...

  2. bzoj 1251: 序列终结者 平衡树,fhqtreap

    链接 https://www.lydsy.com/JudgeOnline/problem.php?id=1251 思路 好简单的模板题 不过还是wrong了好几发 叶子节点要注意下,不能使用 遇到就不 ...

  3. java 之 schema解析

    一,schema约束 *dtd语法:<ELEMENT 元素名 约束> *schema符合xml的语法,xml语句 **一个xml中可以有多个schema,多个schema使用名称空间区分( ...

  4. (转) 深度强化学习综述:从AlphaGo背后的力量到学习资源分享(附论文)

    本文转自:http://mp.weixin.qq.com/s/aAHbybdbs_GtY8OyU6h5WA 专题 | 深度强化学习综述:从AlphaGo背后的力量到学习资源分享(附论文) 原创 201 ...

  5. LOJ 534 花团(线段树+dfs栈)

    题意 https://loj.ac/problem/534 思路 又是复杂度错误的一题,\(O(n^2\log n)\) 能过 \(15000\) . 虽然看起来强制在线,其实是一道假的在线题.首先按 ...

  6. Java基础 【自动装箱和拆箱、面试题】

    JDK 1.5 (以后的版本)的新特性自动装箱和拆箱 1. 自动装箱:把基本类型转换为包装类类型 int a =10; Integer i = new Integer(a); Integer valu ...

  7. Markdown 指南

    Markdown 是一种轻量级的「标记语言」,使用用特殊的 Markdown 文档处理器将 Markdown 语法翻译成预设的文档格式.标题大小等,一般用于展示时输出的是 HTML.这个教程可以让使用 ...

  8. 【转】myeclipse 自定义视图Customize Perspective 没有反应

    官网查了下,解释如下:   附上链接https://www.myeclipseide.com/PNphpBB2-viewtopic-t-30151.html,大概意思是按如下图所示步骤更新即可.读者可 ...

  9. C++中CopyFile、MoveFile的用法

    1.含义 CopyFile(A, B, FALSE);表示将文件A拷贝到B,如果B已经存在则覆盖(第三参数为TRUE时表示不覆盖) MoveFile(A, B);表示将文件A移动到B 2.函数原型 C ...

  10. 【Selenium2】【项目实战】

    [public/login.py] from selenium import webdriverfrom selenium.webdriver.common.by import Byimport ti ...