let t1 = new Date("2019-11-26 15:51:00");// 从什么时间开始
let t2 = new Date(t1.setHours(t1.getHours() + ));// 延迟几个小时
let interval = window.setInterval(() => {
let t3 = t2 - new Date();// 延迟时间距离当前时间的时间戳
if (t3 <= 0) {
alert("时间到!");
window.clearInterval(interval);
return;
}
let leave1 = t3 % (24 * 3600 * 1000);// 获取毫秒数
let hours = Math.floor(leave1 / (3600 * 1000));// 获取小时数
let leave2 = leave1 % (3600 * 1000);// 排除小时的毫秒数
let minutes = Math.floor(leave2 / (60 * 1000));// 获取分钟
let leave3 = leave2 % (60 * 1000);// 排除分钟的毫秒数
let seconds = Math.round(leave3 / 1000);// 获取秒
window.console.log((hours > 9 ? hours : "0" + hours) + ":" + (minutes > 9 ? minutes : "0" + minutes) + ":" + (seconds > 9 ? seconds : "0" + seconds));
}, 500);

JS小时倒计时的更多相关文章

  1. 倒计时的js实现 倒计时 js Jquery

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=987 一.如火如荼的团 ...

  2. 一个简单的js实现倒计时函数

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. js时间倒计时

    看了网上的其他的例子,觉得写的都有点复杂,不好理解,于是自己动手写了个. 本来想封装成jquery插件,但是觉得因为功能很简单,没有必要做成jquery插件,引用的时候不需要引入jqery库,这里直接 ...

  4. js实现倒计时及时间对象

    JS实现倒计时效果代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> ...

  5. JS实现倒计时(天数,时,分,秒)

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

  6. 使用html+css+js实现倒计时,开启你痛苦的倒计时吧

    使用html+css+js实现倒计时,开启你痛苦的倒计时吧 效果图: 这是我痛苦的倒计时,呜呜呜 好啦,再痛苦还是要分享代码,代码如下,复制即可使用: <!DOCTYPE html> &l ...

  7. js网页倒计时精确到秒级

    网页实时倒计时,精确到秒级,和天数倒计时原理一样. 一个很好用的js倒计时!网页实时倒计时,精确到秒级,和天数倒计时原理一样.js倒计时一般用于商城网站团购,特卖,很多地方都可用到!希望能够给大家带来 ...

  8. js 验证码 倒计时60秒

    js 验证码 倒计时60秒 <input type="button" id="btn" value="免费获取验证码" /> & ...

  9. JavaScript实现两小时倒计时

    [构思] 因为只需要的是两小时,所以时间直接写死,然后通过setInterval每1000ms对时间进行减1操作 前期未考虑到当时分秒小于10的状态,所以后面又加上了一个checkTime()来进行限 ...

随机推荐

  1. Qt QMutexLocker_自动解锁的机制

    QMutexLocker 是一个便利类,它可以自动对QMutex加锁与解锁.因为QMutexLocker 申请的这个lock变量在这个函数退出时,自动的调用析构函数来解锁.这样可以防止在程序编写的过程 ...

  2. 题解 [BZOJ4886] 叠塔游戏

    题面 解析 这是个有趣的建图题啊. 首先我们可以发现,宽度严格递增是没什么用的. 因为实际上我们在旋转完以后, 矩形的顺序是可以随便排的. 因此只要保证宽度互不相同就行了. 然后,我们对长和宽离散化, ...

  3. 【Wince-截图】对Wince进行截图

    对Wince进行截图 方法一 使用Wince桌面助手对Wince进行截图 PC通过USB成功连接到手持机 打开Wince桌面助手CERHOST.exe程序 File->Capture进行截图 C ...

  4. Python基础--基于ubuntu linux基础知识点

    part1:Python编译 1.直接在终端编译-----在ubuntu中Python是在home文件夹下的,输入Python(Python2编译,想要Python3直接输入python3) 一般推荐 ...

  5. Java进阶知识10 Hibernate一对多_多对一双向关联(Annotation+XML实现)

    本文知识点(目录): 1.Annotation 注解版(只是测试建表)    2.XML版 的实现(只是测试建表)    3.附录(Annotation 注解版CRUD操作)[注解版有个问题:插入值时 ...

  6. 数据结构实验之链表五:单链表的拆分(SDUT 2120)

    #include <bits/stdc++.h> using namespace std; struct node { int data; struct node *next; }; st ...

  7. Flask-特殊的装饰器

    视图函数中的装饰器 -----------------------视图中的装饰器---------------------- 1.如果使用的是函数视图,那么自己定义的装饰器必须放在`app.route ...

  8. [CSP-S模拟测试]:A(单调栈维护凸包+二分答案)

    题目传送门(内部题150) 输入格式 第一行两个整数$N,Q$. 接下来的$N$行,每行两个整数$a_i,b_i$. 接下来的$Q$行,每行一个整数$x$. 输出格式 对于每个询问,输出一行一个整数表 ...

  9. maven settings.xml详解

    setting.xml配置文件 http://blog.csdn.net/u012152619/article/details/51485152 maven的配置文件settings.xml存在于两个 ...

  10. 操作 SQL语句之数据操作语言(DML)详解

    一.插入数据(INSERT) MariaDB [(none)]> help insertName: 'INSERT'Description:Syntax:INSERT [LOW_PRIORITY ...