javascript计时器编写过程与实现方法

网络编程 2024/9/29 佚名

3 1 2

JavaScript是一门非常容易上手的脚本语言，而且工具繁多，功能强大，因为一直做后端的关系，笔者目前也只是略学一点皮毛。

接下来进入正题——计时器。先谈下计时器的功能:

1.计时器要能够在页面上显示时间

2.每秒钟计时器刷新，秒每满60进分钟1，分钟每满60进小时1

3.计时器需要能够重置，也就是重新计时

4.计时结束时，需要能够有获取计时时间的方法

以上功能很简单，计时还应该有暂停、继续计时等功能，没关系，我们一个一个来。

第一步：

我们做一个简单的页面，要有一个现实时间的标签，要有开始、暂停俩按钮，页面绘制如下：

不要为一个页面花太多时间哦，这只是帮助你写写第一段代码练练手~

第二步：

我们分析下计时器需要哪些属性：

1.计时，需要开始时间

2.结束时间

3.总共走了多长时间，这个属性是要返回给使用者的

4.展示器，其实就是个jquery对象或者dom对象啦，计时是要在一个地方展示的嘛

5.展示时间需要进行拆解，于是我们有小时属性

6.分钟属性

7.秒属性（其实被总时间囊括了，先记上，万一用得到呢）

我们看下代码：

    var startTime;//开始时间
    var endTime;//结束时间
    var timeLength;//总时长
    var timeSpan;//计时器走过的时间
    var displayer;//时间显示器
    var hh=0;//小时
    var mm=0;//分钟
    var status=0;//计时状态

乍一看好像多了几个属性，因为计时会用到JavaScript的setTimeout方法，该方法会返回一个对象，我们可以利用此对象将setTimeout清除（clearTimeout）;

第三步：

我们分析下计时器需要哪些方法：

1.计时器需要启动，于是我们有开始方法

2.计时器需要停止，于是我们有停止方法，停止后应该告诉使用者计了多长时间，于是应该返回时长

3.计时器还应该有个暂停功能，暂停后，可以在暂停的位置上再次开始计时，暂停也应该返回时长

4.围绕启动停止，还应该有每秒钟计时器的内心活动，类似一个委托方法，美秒执行一次

5.呈现逻辑，我们要讲真正的时间显示给页面上的展示器，并且做一些可读性更好的格式转换

上代码，构造函数：

function createTimer(_startTime,_endTime,_timeLength,_displayer){
      startTime=_startTime;//开始时间
      endTime=_endTime;//结束时间
      timeLength=_timeLength;//总时长
      displayer=_displayer;//时间显示器
      hh=0;//小时
      mm=0;//分钟
      status=0;//计时状态
    }

计时器开始：

    var start =function(){
      hh = 0;
      mm = 0;
      startTime=new Date();
      status = setTimeout(beat, 1000);
    }

计时结束：

    var stop=function(){
      clearTimeout(status);
      endTime=new Date();
      timeLength=parseInt((endTime-startTime)/1000);
      alert(timeLength);
    }

每秒钟计时器的内心活动：

     var beat=function(){
      endTime = new Date();
      timeSpan = parseInt((endTime - startTime)/1000);
      displayer[0].innerHTML = checkTime(timeSpan);
      status = setTimeout(beat, 1000);
    }

为了能够展现上图的00:00:00,我们需要一段呈现逻辑

  var checkTime=function(len){
      len=len-mm*60;
      if (len >= 60) {
        this.mm++;
        //starttime1 = new Date();
        len = 0;
      }
      mm=mm-hh*60;
      if (mm >= 60) {
        hh++;
        mm = 0;
      }
      return j(self.hh) + ":" +j(mm) + ":" + j(len);
    }
  
    var j=function(arg){
      return arg >= 10 "0" + arg;
    }

我们启动计时器，这个简单的计时器就开始跑了^_^

是不是少了点什么：计时器哪能没有暂停呀，笔者那会构思这些的时候，也没想到暂停功能，正看着它一秒一秒跳动着，傻乐呢，直到业务需要，才想起来，得加上这功能。

没关系，我们继续设计，demo页上添加一个暂停按钮:P

先分析下：

1.暂停后，肯定要在上次暂停的节点上重新开始，这块功能我们做在开始按钮里，于是我们需要一个标识位，来判断是重新开始，还是暂停后开始

2.我们需要记录暂停的时间点

3.暂停的时间间隔最好也能记下来，能用得到，不然再次开始的时候，时间在呈现上会立刻跳到间隔之后（比如暂停时是00:00:09，暂停一分钟后，如果不作调整直接开始，时间会变成00:01:09）

于是我们添加三个属性：

  var isParse=false;//是否为暂停
    var parseTime;//暂停时间点
    var intervalTime = 0;//暂停时间间隔

暂停方法：

   var parse=function(){
      parseTime = new Date();
      isParse = true;
      clearTimeout(status);
    }

重写开始方法和呈现方法：

    var start =function(){
      if(!isParse){
        startTime=new Date();
        startTime1=startTime;
        hh = 0;
        mm = 0;
        startTime=new Date();
        status = setTimeout(beat, 1000);
      }
      else{
        intervalTime=parseInt((intervalTime + (new Date() - parseTime) / 1000));
        
        starttime1 = startTime;
        status = setTimeout(beat, 1000);
      }
    }

    var checkTime=function(len){
      len=len-mm*60-intervalTime;
      if (len >= 60) {
        mm++;
        len = 0;
      }
      
      mm=mm-hh*60;
      if (mm >= 60) {
        hh++;
        mm = 0;
      }
      return j(hh) + ":" +j(mm) + ":" + j(len);
    }

以上，搞定，我们的计时器拥有了暂停功能~

看下代码全览，核心代码不到一百行。

写到这里，主要工作就做完啦，其实还可以进行封装，利用prototype，将方法全部附到一个对象里，当实例化一个timer对象并初始化一些关键属性后，这些方法都可以被对象调用。这里就不赘述了，感兴趣的童鞋可以试试~

javascript,计时器

华山资源网 Design By www.eoogi.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

华山资源网 Design By www.eoogi.com

评论“javascript计时器编写过程与实现方法”

暂无评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2024年09月29日

javascript计时器编写过程与实现方法

javascript正则表达式总结

javascript插件开发的一些感想和心得

评论“javascript计时器编写过程与实现方法”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接