最近写了一个倒计时的控件,共享出来方便使用

用法: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倒计时插件相关推荐

  1. html倒计时10s,js 倒计时10s

    允许点击 var wait = 10; function time(o){ if(wait==0){ o.innerHTML = "允许点击"; o.removeAttribute ...

  2. html倒计时函数,js倒计时函数封装

    在前端开发中,经常会做一些活动啊,有活动就经常会出现倒计时,这时候,我们就经常性的需要一个js倒计时功能. js倒计时功能,就需要用到js时间戳,我们需要获取当前时间的时间戳和结束时间的时间戳,进行相 ...

  3. 手机锁屏js倒计时停止问题解决办法探索

    手机锁屏js倒计时停止问题解决办法探索 参考文章: (1)手机锁屏js倒计时停止问题解决办法探索 (2)https://www.cnblogs.com/wuyuchao/p/10086982.html ...

  4. js 倒计时 php,2种简单的js倒计时实现方法

    本文主要为大家详细介绍了2个简单js倒计时方式,一是带天数的倒计时,二是单纯分钟和秒倒计时,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家. 一般倒计时的时间都是后台传来的然后渲染 ...

  5. html 倒计时特效,JS节日倒计时特效(精确到毫秒)

    JS节日倒计时特效(精确到毫秒)-时间特效-网页特效-站长新动力-msxindl.com function show_djs(){ var djs = document.getElementById( ...

  6. 时分秒倒计时的js实现

    时分秒倒计时的js实现 2016年06月01日 11:51:45 阅读数:6587 时分秒倒计时的js实现,如图: 闲话少说,直接上代码. html代码: <div id="timer ...

  7. JS倒计时效果(不积蛙步无以至千里不积小流无以成江海)

    JS实现倒计时效果 js基础语法实现倒计时效果(需要手动刷新) 核心算法:输入的时间减去现在的时间就是倒计时所剩余的时间,即倒计时,但是不能拿时分秒相减,比如05分减去25分,结果变负. 用时间戳来做 ...

  8. js倒计时刷新页面不受影响

    JS倒计时(无视页面刷新)使用localStorage <html> <head> <title>JS倒计时(无视页面刷新)使用localStorage</t ...

  9. JS 倒计时展示小工具

    废话开篇:JS 通过操控标签的隐藏与显示来实现倒计时展示小工具 一.实现效果 1.默认展示数字 2.数字倒计时 3.数字倒计时展示虚位 4.数字倒计时不展示虚位 5.小数 6.负数 7.小数倒计时 每 ...

  10. js倒计时代码 支持同一页面多个倒计时代码(转)

    js倒计时代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> ...

最新文章

  1. 半监督目标检测相关方法总结
  2. 利用注解 + 反射消除重复代码(Java项目)
  3. 计算机核心配件是什么,计算机的核心是什么
  4. c语言编程回文数用数组,【C语言程序设计】C语言回文数怎么求?
  5. 20145122《Java面向对象程序设计》实验二实验报告
  6. Linux上Libevent的安装
  7. 算法导论-15.5-4
  8. ubuntu 18.04 安装 LNMP
  9. ホワイトボックステストとブラックボックステストの区別(白盒测试与黑盒测试的区别)...
  10. redis通过lua脚本实现分布式锁
  11. 假如时光倒流,我会这么学习Java 【转载】
  12. 知道为什么HTML页面在电脑上和手机上的布局不同吗?这篇文章带你走进Element UI的简单适配
  13. python朋友圈图片_教你如何用Python处理图片九宫格,炫酷朋友圈
  14. 修真院教学模式四大体系之技能体系
  15. 十字链表画法——蓝墨云班课实践改错
  16. 多源传感器GNSS INS 视觉 LiDAR 组合导航与SLAM开源项目总结
  17. java基于quasar实现协程池【后篇】
  18. 时序分析基本概念介绍Timing Derate
  19. html打印指定区域
  20. Unity3D基础案例-双人坦克

热门文章

  1. 阿里云服务器搭建及宝塔面板安装(图文教程)
  2. 龙达pm3 proxmark3各个版本
  3. Echart使用,看了就会的
  4. 计算机二级软件解压完为啥打不开,计算机2级考试软件常见问题解决方案
  5. 使用PIL和OpenCV在PC上模拟动画OLED / LCD显示器
  6. 服务器数字显示器,数字显示器
  7. 点击文本或按钮实现复制
  8. iOS面试题系列之常见算法
  9. 【上汽零束SOA】云管端一体化SOA软件平台系列介绍之二:数字架构篇
  10. 第一个微信小程序的诞生