文档章节

JS 倒计时(一天的倒计时)

梦梦阁
 梦梦阁
发布于 2017/08/01 14:14
字数 127
阅读 48
收藏 0
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS 倒计时</title>
</head>
<body>
  <div id="test"></div>
</body>
</html>
function NextTime(next, cb) {
    var t;
    (function ft(){
        var dif = (next.getTime() - (new Date()).getTime()) / 1000;
        if(dif > 0){
            t = setTimeout(ft, 1000);
            if(cb)
                cb(Math.floor(dif % 86400 / 3600),  Math.floor(dif % 3600 / 60), Math.floor(dif % 60));
        } else {
            clearTimeout(t);
        }
    })();
    return function(){
        clearTimeout(t);
    };
}

function lpad(num, n) {
	var len = num.toString().length;
	while(len < n) {
		num = "0" + num;
		len++;
	}
	return num;
}

var now  = new Date();
var next = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1);
new NextTime(next, function(hour, minute, second){
  document.getElementById("test").innerHTML=lpad(hour, 2) + ':' + lpad(minute, 2) + ':' + lpad(second, 2);
});

效果预览

© 著作权归作者所有

梦梦阁
粉丝 27
博文 302
码字总数 172850
作品 0
嘉定
高级程序员
私信 提问
点击按钮 倒计时60秒方可再次点击发送的Js代码

本节内容: Javascript 实现 点击按钮 倒计时60秒方可再次点击发送的效果。 比如,一些网站上的手机短信认证的功能,有类似实现点击按钮后,倒计时60秒才能再次点击发送的效果。 本文用Javas...

Carl_
2014/08/06
0
0
vue+canvas实现炫酷时钟效果的倒计时插件(已发布到npm的vue2插件,开箱即用)

前言:   此事例是在vue组件中,使用canvas实现倒计时动画的效果。其实,实现效果的逻辑跟vue没有关系,只要读懂canvas如何实现效果的这部分逻辑就可以了   canvas动画的原理:利用定时器...

damon风
2017/11/23
0
0
Javascript 实现倒计时(10秒)自动关闭网页

JS倒计时10秒 实现功能 实例代码一: <html> <title>倒计时关闭网页</title> <head> <script language="javascript"> var cTime=10;//这个变量是倒计时的秒数设置为10就是10秒 function Tim......

leiboo
2014/04/27
0
0
2016/11/22工作小结

1.如初商城js方法基本上写完了。然后研究了一下倒计时的算法。倒计时目前精确到天/时/分/秒。 记两个js方法 ①new Date获取当前时间 new Date()括号中可以写时间戳和其他格式的时间。 ②dat...

并不是
2016/11/22
0
1
请教一个css的position的兼容问题和javascript的问题

下面是javascript: 这个主要的作用就是,显示一个商品抢购的倒计时,效果如下: 1,但是这是在谷歌浏览器上的效果,在火狐的浏览器上就没有倒计时那行字了。。 2,还有那个javascript的函数,...

plugin
2014/10/21
56
0

没有更多内容

加载失败,请刷新页面

加载更多

聊聊Elasticsearch的MonitorService

序 本文主要研究一下Elasticsearch的MonitorService MonitorService elasticsearch-7.0.1/server/src/main/java/org/elasticsearch/monitor/MonitorService.java public class MonitorServic......

go4it
32分钟前
1
0
二、Docker

1、Docker - The TLDR(Too Long,Don't Read,Linxu 终端工具 ) Docker是在Linux和Windows上运行的软件。它创建、管理和编排容器。该软件以开源方式开发,在Github上作为Moby开源项目的一部分。...

倪伟伟
45分钟前
2
0
Python猫荐书系列之七:Python入门书籍有哪些?

本文原创并首发于公众号【Python猫】,未经授权,请勿转载。 原文地址:https://mp.weixin.qq.com/s/ArN-6mLPzPT8Zoq0Na_tsg 最近,猫哥的 Python 技术学习群里进来了几位比较特殊的同学:一...

豌豆花下猫
今天
5
0
Guava RateLimiter限流源码解析和实例应用

在开发高并发系统时有三把利器用来保护系统:缓存、降级和限流 缓存 缓存的目的是提升系统访问速度和增大系统处理容量 降级 降级是当服务出现问题或者影响到核心流程时,需要暂时屏蔽掉,待高...

算法之名
今天
13
0
国产达梦数据库与MySQL的区别

背景 由于项目上的需要,把项目实现国产化,把底层的MySQL数据库替换为国产的达梦数据库,花了一周的时间研究了国产的数据库-达梦数据库,它和MySQL有一定的区别,SQL的写法也有一些区别。 ...

TSMYK
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部