效果类似于:购物抢购倒计时-->在跳转N多个页面之后,倒计时间仍然正常显示。

思路:

结束时间是固定不变的(endTime),一直在改变的是当下的时间(curTime = new date());

时间差 = 结束时间 - 开始时间(leftTime = endTime - curTime);

知识点:

new Date("2017/06/22,17:00:00");//获取结束时间的时间点(固定)

new Date();//获取当下的时间(不断变化)

setInterval //倒计时

clearInterval();//清除倒计时

<p class="time"></p>

function timeLeft(select,endTime,curTime = new Date()){//curTime默认为当下时间
var leftTime = endTime - curTime;//时间差
if(leftTime <= 0){//如果时间差小于等于0
clearInterval(timer);//清除定时器
$(select).text(0+"天"+0+"时"+0+"分"+0+"秒"+0+"毫秒");
}else{
var days = Math.floor(leftTime/(1000*60*60*24));//天
var hours = Math.floor(leftTime/(1000*60*60)%60);//时
var mi = Math.floor(leftTime/(1000*60)%60);//分
var se = Math.floor(leftTime/1000%60);//秒
var ms = Math.floor(leftTime%1000);//毫秒
$(select).text(days+"天"+hours+"时"+mi+"分"+se+"秒"+ms+"毫秒");
}
} var timer = setInterval(function(){//倒计时
timeLeft(".time",new Date("2017/6/22,17:00:00"));//第一个参数是选择器,第二个参数是结束时间,第三个参数默认为当下时间
},1);//1毫秒倒计时:时间间隔为1,1秒倒计时:时间间隔为1000

 

其他:https://www.cnblogs.com/jiqing9006/p/5737312.html 

jQuery setInterval倒计时精确到毫秒的更多相关文章

  1. 活动倒计时代码(精确到毫秒)jquery插件

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. PHP精确到毫秒秒杀倒计时实例

    精确到毫秒秒杀倒计时PHP源码实例,前台js活动展示倒计时,后台计算倒计时时间.每0.1秒定时刷新活动倒计时时间. PHP: // 注意:php的时间是以秒算.js的时间以毫秒算 // 设置时区 da ...

  3. jquery实现倒计时

    <html> <head> <meta charset="utf-8"/> <title>jquery实现倒计时</title ...

  4. jQuery实现倒计时效果-杨秀徐

    本实例效果:剩余368天22小时39分57秒结束 代码简单易懂,适用各种倒计时: <!DOCTYPE html> <head> <title>jQuery实现倒计时 ...

  5. jquery.countdown 倒计时插件的学习

    1.第一种简单的使用 第一个时间是你的倒计时截止时间,finalDate格式可以是YYYY/MM/DD MM/DD/YYYY YYYY/MM/DD hh:mm:ss MM/DD/YYYY hh:mm: ...

  6. jQuery控制倒计时

    1.1 秒杀的倒计时 做秒杀网页总免不了倒计时,但没有很好的服务器,啥资源都没有,只能将部分任务交给浏览器去处理,比如秒杀首页的倒计时,因为真正秒杀是在具体页面,首页只是展示而已,所以误差一点是允许的 ...

  7. .net 时间戳互相转换(精确到毫秒)

    这里记录一个时间戳的互相转换方法,网上都找了,基本都没有精确到毫秒,我的这个基本可以满足精确到毫秒的级别,代码如下: /// <summary> /// Unix时间戳转换为DateTim ...

  8. PHP时间戳与时间相互转换(精确到毫秒)

    原文:PHP时间戳与时间相互转换(精确到毫秒) /** 获取当前时间戳,精确到毫秒 */ function microtime_float(){   list($usec, $sec) = explo ...

  9. mysql datetime与timestamp精确到毫秒的问题

    CREATE TABLE `tab1` (`tab1_id` VARCHAR(11) DEFAULT NULL,`create` TIMESTAMP(3) NULL DEFAULT NULL,`cre ...

随机推荐

  1. HDU 4478 Where is King

    题目大意: 一个王可以向周围8个方格走,如果都不通留在原地,t秒后,他可能存在的位置数 这题数据量过大,我们需要通过奇偶性判断,如果t = 0可以到达,说明 t=2,4,6....都可以到达 所以我这 ...

  2. python用模块zlib压缩与解压字符串和文件的方法

    摘自:http://www.jb51.net/article/100218.htm Python标准模块中,有多个模块用于数据的压缩与解压缩,如zipfile,gzip, bz2等等. python中 ...

  3. 【http_load】http_load性能测试工具使用详解

    1.什么是http_loadhttp_load是一款基于Linux平台的web服务器性能测试工具,用于测试web服务器的吞吐量与负载,web页面的性能. 2.http_load的安装1)下载地址wge ...

  4. redis可视化界面的操作【二十一】

    1.安装  2.linux服务器中开启linux服务 root@qiaozhi:~# cd /usr/local/redis root@qiaozhi:/usr/local/redis# ./bin/ ...

  5. Web App 响应式页面制作 笔记整理

    一.移动端种类.分辨率大小 说明: 以主流的iPad.iPhone为例. 工具: Resizer官网: Resizer 用法: 将通栏处写有 “Click or Bookmark”的蓝色按钮拖拽至标签 ...

  6. 无权二分图最大匹配 HDU2063 匈牙利算法 || Hopcroft-Karp

    参考两篇比较好的博客 http://www.renfei.org/blog/bipartite-matching.html http://blog.csdn.net/thundermrbird/art ...

  7. POJ 2431 Expedition【贪心】

    题意: 卡车每走一个单元消耗一升汽油,中途有加油站,可以进行加油,问能否到达终点,求最少加油次数. 分析: 优先队列+贪心 代码: #include<iostream> #include& ...

  8. 使用idea编译spring-framework5.0源码

    自从迈入java开发这个行当,从来没有好好的研究过源码,深感惭愧,话不多说,今天上一篇使用idea编译spring5.0源码. 以下在win中构建和编译过程分为 jdk环境的配置 gradle的下载和 ...

  9. Java 添加、更新和移除PDF超链接

    简介 PDF超链接用一个简单的链接包含了大量的信息,满足了人们在不占用太多空间的情况下渲染外部信息的需求.下面将介绍通过Java 在PDF中添加.更新和移除超链接. (一)工具使用: Free Spi ...

  10. 一句话创建Jupyter For TensorFlow

    docker run -v /home/jupyter_files:/home/jovyan/work -it -d --rm -p 10082:8888 jupyter/tensorflow-not ...