javascript实现的简单计时器
作者:hebedich 发布时间:2024-07-05 08:15:43
标签:javascript,计时器
最近写了很多微信端的互动小游戏,比如下雪花 限时点击 赢取奖品,限时拼图,限时答题等,都是些限时‘游戏'(其实算不上游戏,顶多算是具有一点娱乐性的小互动而已)
上面出现了4个限时,对,没错,这里记录的就是最近写的 ‘计时器' ...
恩 , 计时器 就一个setInterval 或 setTimeout 即可实现 ,代码不会超过十行!
但是不防抱着没事找事的心态,来写个能复用的计时器
1.能倒计时 也能顺计时
2.复位、暂停、停止,启动功能
//计时器
window.timer = (function(){
function mod(opt){
//可配置参数 都带有默认值
//必选参数
this.ele = typeof(opt.ele)=='string'?document.getElementById(opt.ele):opt.ele;//元素
//可选参数
this.startT = opt.startT||0;//时间基数
this.endT = opt.endT=='undefined'?24*60*60:opt.endT;//结束时间 默认为一天
this.setStr = opt.setStr||null;//字符串拼接
this.countdown = opt.countdown||false;//倒计时
this.step = opt.step||1000;
//不可配置参数
this.timeV = this.startT;//当前时间
this.startB = false;//是否启动了计时
this.pauseB = false;//是否暂停
this.init();
}
mod.prototype = {
constructor : 'timer',
init : function(){
this.ele.innerHTML = this.setStr(this.timeV);
},
start : function(){
if(this.pauseB==true||this.startB == true){
this.pauseB = false;
return;
}
if(this.countdown==false&&this.endT<=this.cardinalNum){
return false;
}else if(this.countdown==true&&this.endT>=this.startT){
return false;
}
this.startB = true;
var v = this.startT,
this_ = this,
anim = null;
anim = setInterval(function(){
if(this_.startB==false||v==this_.endT){clearInterval(anim);return false}
if(this_.pauseB==true)return;
this_.timeV = this_.countdown?--v:++v;
this_.ele.innerHTML = this_.setStr(this_.timeV);
},this_.step);
},
reset : function(){
this.startB = false;
this.timeV = this.startT;
this.ele.innerHTML = this.setStr(this.timeV);
},
pause : function(){
if(this.startB == true)this.pauseB = true;
},
stop : function(){
this.startB = false;
}
}
return mod;
})();
调用方式:
var timerO_1 = new timer({
ele : 'BOX1',
startT : 0,
endT : 15,
setStr : function(num){
return num+'s';
}
});
var timerO_2 = new timer({
ele : 'BOX2',
startT : 30,
endT : 0,
countdown : true,
step : 500,
setStr : function(num){
return num+'s';
}
});
这里传入的方法 setStr是计数器计算的当前时间写入ele前的字符串处理
countdown是否为倒计时 默认为顺计时
可以通过 timerO.timeV 来获取当前时间
以上所述就是本文的全部内容了,希望大家能够喜欢。


猜你喜欢
- 本文实例讲述了Python中pandas模块DataFrame创建方法。分享给大家供大家参考,具体如下:DataFrame创建1. 通过列表
- 全国抗"疫"这么久终于见到曙光,在家待了将近一个月,现在终于可以去上班了,可是却发现出门必备的口罩却一直买不到。最近看到
- 本文介绍了使用XMlhttp技术来生成html页面,值得借鉴。相关函数:<% ’定义xmlhttp funct
- 很久没有上过天极网,今天偶然兴起跑上去看了一下,看到消息说天极网深圳站隆重上线,于是也顺便去溜了一把,打开页面的时候差点有种不知所措的感觉,
- 闭包函数是什么?在开始学习的闭包的时候,大家很能都比较难理解.就从他的官方解释来说,都是比较概念化的.不过我们也还是从闭包的含义出发。闭包是
- 本文实例讲述了JavaScript函数重载操作。分享给大家供大家参考,具体如下:上个星期四下午,接到了网易的视频面试(前端实习生第二轮技术面
- 1. 函数式编程概述1.1. 什么是函数式编程?函数式编程使用一系列的函数解决问题。函数仅接受输入并产生输出,不包含任何能影响产生输出的内部
- import retext='V101_renow.Android.2.2.Normal.1.Alpha.apk?IMSI=4600
- 1.写在前面JS要实现下载功能,一般都是这么几个过程:生成下载的URL,动态创建一个A标签,并将其href指向生成的URL,然后触发A标签的
- 使用python自带的itertools模块调用其product函数传入我们想组合生成的字符数据便会源源不断的生成组合而且不会重复repea
- 一、go语言内存布局想象一下,你有一个如下的结构体。type MyData struct {
- 当用户访问一个网站的时候,第一屏的信息展示是非常重要的,很大程度上影响了用户是否决定停留,然而光靠文字大面积的堆积,很难直观而迅速的告诉用户
- 下面是IN条件运算符的SQL语句:SELECT column1, SUM(column2) FROM&nbs
- 1. 谈谈Javascript的对象Javascript作为一种弱语言类型的语言,同时也是一种动态类型的语言。在使用Javascript的过
- 写项目时,发现 element 里的图标没有我需要的图标,两种情况:① 简单的替换小图标,没有选中变色等要求② 有选中变色等要求,稍微复杂的
- 本文介绍了vue.js $refs和$emit 父子组件交互的方法,分享给大家,废话不多说直接看代码:<strong>父调子 $
- 1.创建虚拟环境首先创建一个新文件夹在PyCharm终端中切换到这个文件夹,输入 python -m venv 环境名 创建虚拟环境&nbs
- 过滤器过滤器的本质就是函数。有时候我们不仅仅只是需要输出变量的值,我们还需要修改变量的显示,甚至格式化、运算等等,而在模板中是不能直接调用
- 当系统出现故障时,只要存在数据日志那么就可以利用它来恢复数据解决数据库故障。作为SQL Server数据库管理员,了解数据日志文件的作用,以
- 本文实例讲述了Vue常用传值方式、父传子、子传父及非父子。分享给大家供大家参考,具体如下:父组件向子组件传值是利用props子组件中的注意事