javascript实现的简单计时器


Posted in Javascript onJuly 19, 2015

最近写了很多微信端的互动小游戏,比如下雪花 限时点击 赢取奖品,限时拼图,限时答题等,都是些限时‘游戏'(其实算不上游戏,顶多算是具有一点娱乐性的小互动而已)

上面出现了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 来获取当前时间

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
JS小功能(onmouseover实现选择月份)实例代码
Nov 28 Javascript
input:checkbox多选框实现单选效果跟radio一样
Jun 16 Javascript
Javascript基础教程之函数对象和属性
Jan 18 Javascript
基于JS快速实现导航下拉菜单动画效果附源码下载
Oct 27 Javascript
详解vue.js组件化开发实践
Dec 14 Javascript
vue-cli项目根据线上环境分别打出测试包和生产包
May 23 Javascript
详解Vue的钩子函数(路由导航守卫、keep-alive、生命周期钩子)
Jul 24 Javascript
Vue-router 切换组件页面时进入进出动画方法
Sep 01 Javascript
微信小程序iOS下拉白屏晃动问题解决方案
Oct 12 Javascript
vue实现浏览器全屏展示功能
Nov 27 Javascript
详解如何使用React Hooks请求数据并渲染
Oct 18 Javascript
vue+django实现下载文件的示例
Mar 24 Vue.js
javascript中setInterval的用法
Jul 19 #Javascript
js中跨域方法原理详解
Jul 19 #Javascript
javascript获取网页宽高方法汇总
Jul 19 #Javascript
jQuery获取URL请求参数的方法
Jul 18 #Javascript
jQuery增加自定义函数的方法
Jul 18 #Javascript
jQuery插件简单实现方法
Jul 18 #Javascript
javascript实现页面刷新时自动清空表单并选中的方法
Jul 18 #Javascript
You might like
PHP 数据库树的遍历方法
2009/02/06 PHP
php 方便水印和缩略图的图形类
2009/05/21 PHP
用php实现的获取网页中的图片并保存到本地的代码
2010/01/05 PHP
nginx+php-fpm配置文件的组织结构介绍
2012/11/07 PHP
php页码形式分页函数支持静态化地址及ajax分页
2014/03/28 PHP
php微信公众平台开发类实例
2015/04/01 PHP
php中strtotime函数性能分析
2016/11/20 PHP
PHP 自动加载类原理与用法实例分析
2020/04/14 PHP
简单JS代码压缩器
2006/10/12 Javascript
高效的表格行背景隔行变色及选定高亮的JS代码
2010/12/04 Javascript
node.js中的fs.close方法使用说明
2014/12/17 Javascript
Javascript访问器属性实例分析
2014/12/30 Javascript
js console.log打印对像与数组用法详解
2016/01/21 Javascript
关于微信小程序bug记录与解决方法
2018/08/15 Javascript
vue中使用vee-validator完成表单校验方案
2019/11/01 Javascript
vue项目中极验验证的使用代码示例
2019/12/03 Javascript
Vue filter 过滤当前时间 实现实时更新效果
2019/12/20 Javascript
[31:01]2014 DOTA2国际邀请赛中国区预选赛5.21 CNB VS Orenda
2014/05/23 DOTA
Python使用pip安装pySerial串口通讯模块
2018/04/20 Python
Python异常处理操作实例详解
2018/05/10 Python
如何在django里上传csv文件并进行入库处理的方法
2019/01/02 Python
Django的models中on_delete参数详解
2019/07/16 Python
Python3 批量扫描端口的例子
2019/07/25 Python
python sqlite的Row对象操作示例
2019/09/11 Python
python实现图片二值化及灰度处理方式
2019/12/07 Python
python GUI库图形界面开发之PyQt5滑块条控件QSlider详细使用方法与实例
2020/02/28 Python
丹麦优惠购物网站:PLUSSHOP
2019/03/24 全球购物
机械电子工程专业求职信
2014/06/22 职场文书
我与祖国共奋进演讲稿
2014/09/13 职场文书
消费者投诉书范文
2015/07/02 职场文书
初中思品教学反思
2016/02/20 职场文书
大学生暑期社会实践的个人总结!
2019/07/17 职场文书
创业计划书之农家乐
2019/10/09 职场文书
python实战之一步一步教你绘制小猪佩奇
2021/04/22 Python
使用redis生成唯一编号及原理示例详解
2021/09/15 Redis
vue代码分块和懒加载非必要资源文件
2022/04/11 Vue.js