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


Posted in Javascript onFebruary 29, 2016

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

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

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

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

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

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

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

第一步:

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

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

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

 第二步:

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

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 ? arg : "0" + arg;
    }

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

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

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

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

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

先分析下:

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);
    }

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

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

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

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

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

Javascript 相关文章推荐
映彩衣的js随笔(js图片切换效果)
Jul 31 Javascript
jQuery实现MSN中文网滑动Tab菜单效果代码
Sep 09 Javascript
Jquery中使用show()与hide()方法动画显示和隐藏图片
Oct 08 Javascript
使用jQuery获取data-的自定义属性
Nov 10 Javascript
javascript实现一个简单的弹出窗
Feb 22 Javascript
基于JavaScript实现屏幕滚动效果
Jan 18 Javascript
canvas绘制七巧板
Feb 03 Javascript
layer弹窗插件操作方法详解
May 19 Javascript
AngularJS中下拉框的基本用法示例
Oct 11 Javascript
vue-resource拦截器设置头信息的实例
Oct 27 Javascript
JavaScript模块详解
Dec 18 Javascript
JS运动特效之完美运动框架实例分析
Jan 24 Javascript
javascript插件开发的一些感想和心得
Feb 28 #Javascript
详解Javascript中的Object对象
Feb 28 #Javascript
Jquery跨浏览器文本复制插件Zero Clipboard的使用方法
Feb 28 #Javascript
JavaScript实现iframe自动高度调整和不同主域名跨域
Feb 27 #Javascript
Javascript技术栈中的四种依赖注入小结
Feb 27 #Javascript
javascript的 {} 语句块详解
Feb 27 #Javascript
javascript中eval解析JSON字符串
Feb 27 #Javascript
You might like
详解WordPress中用于更新和获取用户选项数据的PHP函数
2016/03/08 PHP
PHP简单实现数字分页功能示例
2016/08/24 PHP
php常用正则函数实例小结
2016/12/29 PHP
php获取指定数量随机字符串的方法
2017/02/06 PHP
浅谈PHP的反射API
2017/02/26 PHP
php生成0~1随机小数的方法(必看)
2017/04/05 PHP
HTTP 304错误的详细讲解
2013/11/13 Javascript
javascript在IE下trim函数无法使用的解决方法
2014/09/12 Javascript
javascript中HTMLDOM操作详解
2014/12/11 Javascript
javascript数据类型验证方法
2015/12/31 Javascript
鼠标悬停小图标显示大图标
2016/01/22 Javascript
浅谈JS验证表单文本域输入空格的问题
2017/02/14 Javascript
JavaScript中的this陷阱的最全收集并整理(没有之一)
2017/02/21 Javascript
打字效果动画的4种实现方法(超简单)
2017/10/18 Javascript
anime.js 实现带有描边动画效果的复选框(推荐)
2017/12/24 Javascript
利用CDN加速react webpack打包后的文件详解
2018/02/22 Javascript
vue 实现复制内容到粘贴板clipboard的方法
2018/03/17 Javascript
React Hooks的深入理解与使用
2018/11/12 Javascript
实例详解vue中的$root和$parent
2019/04/29 Javascript
vue中使用mxgraph的方法实例代码详解
2019/05/17 Javascript
Vue实现表格批量审核功能实例代码
2019/05/28 Javascript
在vue中实现嵌套页面(iframe)
2020/07/30 Javascript
python中的__slots__使用示例
2015/02/26 Python
Python使用QRCode模块生成二维码实例详解
2017/06/14 Python
python批量读取txt文件为DataFrame的方法
2018/04/03 Python
Python中的Numpy矩阵操作
2018/08/12 Python
解决django无法访问本地static文件(js,css,img)网页里js,cs都加载不了
2020/04/07 Python
Python同时处理多个异常的方法
2020/07/28 Python
JavaScript实现前端网页版倒计时
2021/03/24 Javascript
社会学专业求职信
2014/02/24 职场文书
小学生开学感言
2014/02/28 职场文书
法人代表任命书范本
2014/06/05 职场文书
小学网上祭英烈活动总结
2014/07/05 职场文书
学校食堂食品安全承诺书
2015/04/29 职场文书
2016高考冲刺决心书
2015/09/23 职场文书
go 实现简易端口扫描的示例
2021/05/22 Golang