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>
jq 倒计时的更多相关文章
- JS与JQ倒计时的写法
页面需要制作一个倒计时的功能:然后度娘了一遍,找到两种写法,原生JS与JQ 的,经过测试原生JS在IE可能会有不刷新的现象所以结合了一个大神的JQ写法修改好了一个. 原生JS写法: HTML: < ...
- jq倒计时(代码)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- js/jq 倒计时插件(一)
//很多时候我们需要用到倒计时比如(一些发布会倒计时,秒杀倒计时,活动倒计时等),接下来将介绍两种倒计时插件的写法 //html结构 <!DOCTYPE html> <html la ...
- JQ倒计时天时分秒
<div id="times_wrap" class="time_num"> 距离现在时间: <div class="time_w& ...
- jq倒计时
var referTime = 5; setInterval("refer('#show')", 1000); function refer(obj){ if(referTime ...
- JQ倒计时,正计时
<p class="lastP">距离二维码过期还剩<strong></strong>秒,过期后自动刷新页面.</p><scr ...
- js&jq 发送验证码倒计时
<input type="text" name='' id="btn"> //发送验证码倒计时var wait=30; function t ...
- jq 实现发送验证码倒计时功能
var util = { wait:60, hsTime: function (that) { _this = this; if (_this.wait == 0) { $('#hsbtn').rem ...
- jq实现竞拍倒计时
1jq的效果代码 //全局变量用于存储当前时间 var nows; function rightZeroStr(v) { ) { " + v; } return v + "&quo ...
随机推荐
- Python3 tkinter基础 Entry state 不可写 可以选 可复制的输入框
Python : 3.7.0 OS : Ubuntu 18.04.1 LTS IDE : PyCharm 2018.2.4 Conda ...
- vue学习【第三篇】:vue之node.js的简单介绍
什么是node.js 它是可以运行JavaScript的服务平台,可以吧它当做一门后端程序,只是它的开发语言是JavaScript 安装node.js node.js的特性 - 非阻塞IO模型 - 时 ...
- P3128 [USACO15DEC]最大流Max Flow
思路 这个题哪里有那么费脑筋 我们可以树链剖分嘛LCT昨天学的时候睡着了,不是太会 两遍dfs+一个5行的BIT 其实树链剖分学好了对倍增和LCT理解上都有好处 一条路径上的修改 由于一条剖出来的链是 ...
- newcoder H肥猪(单调队列 / 线段树)题解
题意: 小B来到了一个异世界,成为了肥猪之王. 在这个异世界,共有n种肥猪,编号分别为1,...,n. 小B希望集齐这n种肥猪. 召集肥猪有两种方式: 1. 花费a[i]的金币召唤一只编号为i的肥猪. ...
- CF1137C Museums Tour
思路 强连通分量的好题 对于每个博物馆,因为时间的限制条件,不好直接统计, 发现d很小,可以建出d层分层图,原图<u,v>的边变成<u,i>到<v,i+1>的边,& ...
- (zhuan) 126 篇殿堂级深度学习论文分类整理 从入门到应用
126 篇殿堂级深度学习论文分类整理 从入门到应用 | 干货 雷锋网 作者: 三川 2017-03-02 18:40:00 查看源网址 阅读数:66 如果你有非常大的决心从事深度学习,又不想在这一行打 ...
- [HDU 2520] 我是菜鸟,我怕谁(不一样的for循环)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2520 //学学不一样的for循环 #include<iostream> #include& ...
- PTA 7-1 整数分解为若干项之和(20 分)
7-1 整数分解为若干项之和(20 分) 将一个正整数N分解成几个正整数相加,可以有多种分解方法,例如7=6+1,7=5+2,7=5+1+1,….编程求出正整数N的所有整数分解式子. 输入格式: 每个 ...
- SAP月结操作讲解
SAP月结操作讲解 https://wenku.baidu.com/view/ac6fe45d312b3169a451a4b9.html 步聚 操作内容 事务码 是否必须 操作时间 月/年结 1 ...
- 批量Excel数据导入Oracle数据库
由于一直基于Oracle数据库上做开发,因此常常会需要把大量的Excel数据导入到Oracle数据库中,其实如果从事SqlServer数据库的开发,那么思路也是一样的,本文主要介绍如何导入Excel数 ...