当前位置: 首页 > 编程笔记 >

javascript实现的简单计时器

卫沈义
2023-03-14
本文向大家介绍javascript实现的简单计时器,包括了javascript实现的简单计时器的使用技巧和注意事项,需要的朋友参考一下

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

上面出现了4个限时,对,没错,这里记录的就是最近写的 ‘计时器' ...

恩 , 计时器 就一个setInterval 或 setTimeout 即可实现 ,html" target="_blank">代码不会超过十行!

但是不防抱着没事找事的心态,来写个能复用的计时器

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实现简单计算器,包括了JavaScript实现简单计算器的使用技巧和注意事项,需要的朋友参考一下 适合初学者参考的简易计算器,里面没有太多的难以理解的方法,使用的是最基础的JS语法解决式子的运算问题,同时处理了式子中的运算优先级。 实现思路 1、通过绑定点击事件实现待计算式子的输入 2、遍历原式子,读取式子中乘除运算符的位置 3、优先处理乘除取余运算 4、处理加减

  • 本文向大家介绍Javascript 实现简单计算器实例代码,包括了Javascript 实现简单计算器实例代码的使用技巧和注意事项,需要的朋友参考一下 效果图: 刚开始做时没考虑到清零和退格两个功能,嘻嘻,后来加的整体与传统计算器比有点小瑕疵。 代码: 感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

  • 本文向大家介绍基于javascript实现简单计算器功能,包括了基于javascript实现简单计算器功能的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家介绍javascript实现简单计算器功能的详细代码,分享给大家供大家参考,具体内容如下 效果图: 实现代码: 希望本文所述对大家学习javascript程序设计有所帮助。

  • 本文向大家介绍javascript实现简单计算器效果【推荐】,包括了javascript实现简单计算器效果【推荐】的使用技巧和注意事项,需要的朋友参考一下 最终效果如下图-2,有bug:就是整数后点击%号结果正确,如果小数后面点击%的话结果就错误!其他都正常,求指点:input的value是string类型的,在JS中改如何正确处理下图-1中的if部分?? 图-1 图-2 HTML代码如下 CSS

  • 本文向大家介绍Android利用SurfaceView实现简单计时器,包括了Android利用SurfaceView实现简单计时器的使用技巧和注意事项,需要的朋友参考一下 自学了android有几个月了,跟着网上的节奏,应该早点写些博客来提高自己的水准的。但苦于技术水准始终不自信(也是不过关的结果吧),就一直只是将自己学习过程中的问题和重要的知识点写在自己的笔记文档中。 但,总感觉一个人写下来成就

  • 本文向大家介绍jquery简单倒计时实现方法,包括了jquery简单倒计时实现方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了jquery简单倒计时实现方法。分享给大家供大家参考,具体如下: 希望本文所述对大家jQuery程序设计有所帮助。