html倒计时插,JS倒计时插件
最近写了一个倒计时的控件,共享出来方便使用
用法:var stopwatch = new Stopwatch(“倒计时间/秒”,”倒计时完成时的回调函数”,”每个计时事件回调”,”计时步长/秒”)
stopwatch.start();//开始/继续计时
stopwatch.pause();//暂时计时
stopwatch.restart();//重新开始计时
stopwatch.stop();//停止计时
(function(global, factory) {
// 兼容requirejs和普通引入模式
if (typeof module === "object" && typeof module.exports === "object") {
module.exports = global.document ? factory(global, true) : function(w) {
if (!w.document) {
throw new Error("requires a window with a document");
}
return factory(w);
};
} else {
factory(global);
}
}(typeof window !== "undefined" ? window : this, function(window, noGlobal) {
// 构造方法
var Stopwatch = function(countDownTime, stopedRecall,tickRecall,steparg) {
this.iniTime = parseInt(countDownTime);
if(typeof stopedRecall == "function"){
this.recall = stopedRecall;
}else{
console.error("回调方法必须为function");
return null;
}
if(tickRecall){
if(typeof tickRecall == "function"){
this.tick = tickRecall;
}else{
console.error("回调方法必须为function");
return null;
}
}
this.curtime = countDownTime;
this.status = "stop";
this.step = 1;
if(steparg && steparg > 0){
this.step = steparg;
}
};
if (typeof noGlobal === typeof undefined) {
if (typeof window.Stopwatch === typeof undefined) {
window.Stopwatch = Stopwatch;
} else {
Stopwatch = window.Stopwatch;
}
}
// 对象方法
Stopwatch.prototype.start = function() {
this.status = "counting";
this.curtime = this.iniTime;
this.countDown();
};
Stopwatch.prototype.stop = function() {
this.curtime = this.iniTime;
this.status = "stop";
};
Stopwatch.prototype.pause = function() {
this.status = "pause";
};
Stopwatch.prototype.restart = function() {
this.status = "counting";
this.curtime = this.iniTime;
this.countDown();
};
Stopwatch.prototype.countDown = function() {
if (this.status == "counting") {
if (this.curtime <= 0) {
this.recall();
this.status = "stop";
} else {
this.curtime = this.curtime-this.step;
var $this = this;
this.tick();
window.setTimeout(function() {
$this.countDown();
}, 1000);
}
}
};
Stopwatch.prototype.tick = function(){
if(console&&console.log){
console.log("tick:"+this.curtime);
}
};
Stopwatch.prototype.recall = function(){
if(console&&console.log){
console.log("stoped");
}
};
return Stopwatch;
}));
下载:https://github.com/wamdy/JsUtils/blob/master/src/Stopwatch.js
打赏
微信扫一扫,打赏作者吧~
Like this:
Like Loading...
相关
html倒计时插,JS倒计时插件相关推荐
- html倒计时10s,js 倒计时10s
允许点击 var wait = 10; function time(o){ if(wait==0){ o.innerHTML = "允许点击"; o.removeAttribute ...
- html倒计时函数,js倒计时函数封装
在前端开发中,经常会做一些活动啊,有活动就经常会出现倒计时,这时候,我们就经常性的需要一个js倒计时功能. js倒计时功能,就需要用到js时间戳,我们需要获取当前时间的时间戳和结束时间的时间戳,进行相 ...
- 手机锁屏js倒计时停止问题解决办法探索
手机锁屏js倒计时停止问题解决办法探索 参考文章: (1)手机锁屏js倒计时停止问题解决办法探索 (2)https://www.cnblogs.com/wuyuchao/p/10086982.html ...
- js 倒计时 php,2种简单的js倒计时实现方法
本文主要为大家详细介绍了2个简单js倒计时方式,一是带天数的倒计时,二是单纯分钟和秒倒计时,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家. 一般倒计时的时间都是后台传来的然后渲染 ...
- html 倒计时特效,JS节日倒计时特效(精确到毫秒)
JS节日倒计时特效(精确到毫秒)-时间特效-网页特效-站长新动力-msxindl.com function show_djs(){ var djs = document.getElementById( ...
- 时分秒倒计时的js实现
时分秒倒计时的js实现 2016年06月01日 11:51:45 阅读数:6587 时分秒倒计时的js实现,如图: 闲话少说,直接上代码. html代码: <div id="timer ...
- JS倒计时效果(不积蛙步无以至千里不积小流无以成江海)
JS实现倒计时效果 js基础语法实现倒计时效果(需要手动刷新) 核心算法:输入的时间减去现在的时间就是倒计时所剩余的时间,即倒计时,但是不能拿时分秒相减,比如05分减去25分,结果变负. 用时间戳来做 ...
- js倒计时刷新页面不受影响
JS倒计时(无视页面刷新)使用localStorage <html> <head> <title>JS倒计时(无视页面刷新)使用localStorage</t ...
- JS 倒计时展示小工具
废话开篇:JS 通过操控标签的隐藏与显示来实现倒计时展示小工具 一.实现效果 1.默认展示数字 2.数字倒计时 3.数字倒计时展示虚位 4.数字倒计时不展示虚位 5.小数 6.负数 7.小数倒计时 每 ...
- js倒计时代码 支持同一页面多个倒计时代码(转)
js倒计时代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> ...
最新文章
- 半监督目标检测相关方法总结
- 利用注解 + 反射消除重复代码(Java项目)
- 计算机核心配件是什么,计算机的核心是什么
- c语言编程回文数用数组,【C语言程序设计】C语言回文数怎么求?
- 20145122《Java面向对象程序设计》实验二实验报告
- Linux上Libevent的安装
- 算法导论-15.5-4
- ubuntu 18.04 安装 LNMP
- ホワイトボックステストとブラックボックステストの区別(白盒测试与黑盒测试的区别)...
- redis通过lua脚本实现分布式锁
- 假如时光倒流,我会这么学习Java 【转载】
- 知道为什么HTML页面在电脑上和手机上的布局不同吗?这篇文章带你走进Element UI的简单适配
- python朋友圈图片_教你如何用Python处理图片九宫格,炫酷朋友圈
- 修真院教学模式四大体系之技能体系
- 十字链表画法——蓝墨云班课实践改错
- 多源传感器GNSS INS 视觉 LiDAR 组合导航与SLAM开源项目总结
- java基于quasar实现协程池【后篇】
- 时序分析基本概念介绍Timing Derate
- html打印指定区域
- Unity3D基础案例-双人坦克