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 相关文章推荐
JavaScript实现x秒后自动跳转到一个页面
Jan 03 Javascript
ext中store.load跟store.reload的区别示例介绍
Jun 17 Javascript
浅谈Node.js中的定时器
Jun 18 Javascript
jQuery中的ajax async同步和异步详解
Sep 29 Javascript
JS触发服务器控件的单击事件(详解)
Aug 06 Javascript
Vue.js第二天学习笔记(vue-router)
Dec 01 Javascript
详解webpack与SPA实践之开发环境搭建
Dec 18 Javascript
swiper在vue项目中loop循环轮播失效的解决方法
Sep 15 Javascript
vue elementui form表单验证的实现
Nov 11 Javascript
微信小程序搭建自己的Https服务器
May 02 Javascript
如何解决js函数防抖、节流出现的问题
Jun 17 Javascript
js实现缓动动画
Nov 25 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
浅析SVN常见问题及解决方法
2013/06/21 PHP
Yii2单元测试用法示例
2016/11/12 PHP
Laravel6.18.19如何优雅的切换发件账户
2020/06/14 PHP
javascript实现div的拖动并调整大小类似qq空间个性编辑模块
2012/12/12 Javascript
控制文字内容的显示与隐藏示例
2014/06/11 Javascript
js验证上传图片的方法
2015/05/12 Javascript
jQuery实用小技巧_输入框文字获取和失去焦点的简单实例
2016/08/25 Javascript
BootStrap实现手机端轮播图左右滑动事件
2016/10/13 Javascript
JavaScript常见的五种数组去重的方式
2016/12/15 Javascript
js仿拉勾网首页穿墙广告效果
2017/03/08 Javascript
详解vue-cli 脚手架项目-package.json
2017/07/04 Javascript
微信小程序websocket聊天室的实现示例代码
2019/02/12 Javascript
Vue动态组件和异步组件原理详解
2019/05/06 Javascript
详解vue中$nextTick和$forceUpdate的用法
2019/12/11 Javascript
JavaScript canvas绘制圆弧与圆形
2020/02/18 Javascript
vue element 关闭当前tab 跳转到上一路由操作
2020/07/22 Javascript
[02:20]DOTA2亚洲邀请赛 EHOME战队出场宣传片
2015/02/07 DOTA
python pickle 和 shelve模块的用法
2013/09/16 Python
pip 错误unused-command-line-argument-hard-error-in-future解决办法
2014/06/01 Python
Python按行读取文件的实现方法【小文件和大文件读取】
2016/09/19 Python
详解Django解决ajax跨域访问问题
2018/08/24 Python
python中报错"json.decoder.JSONDecodeError: Expecting value:"的解决
2019/04/29 Python
python+selenium 脚本实现每天自动登记的思路详解
2020/03/11 Python
用 Django 开发一个 Python Web API的方法步骤
2020/12/03 Python
CSS3的Flexbox布局的简明入门指南
2016/04/08 HTML / CSS
台湾网友喜爱的综合型网路购物商城:Yahoo! 奇摩购物中心
2018/03/10 全球购物
Belvilla法国:休闲度假房屋出租
2020/10/03 全球购物
中专生毕业自我鉴定
2013/11/01 职场文书
小学教师自我鉴定
2013/11/07 职场文书
党建示范点实施方案
2014/03/12 职场文书
新春寄语大全
2014/04/09 职场文书
法制宣传教育方案
2014/05/09 职场文书
九年级语文教学反思
2016/03/03 职场文书
一文帮你理解PReact10.5.13源码
2021/04/03 Javascript
Apache Calcite 实现方言转换的代码
2021/04/24 Servers
深入理解MySQL中MVCC与BufferPool缓存机制
2022/05/25 MySQL