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 相关文章推荐
下载站控制介绍字数显示的脚本 显示全部 隐藏介绍等功能
Sep 19 Javascript
Javascript中产生固定结果的函数优化技巧
Jan 16 Javascript
Javascript事件实例详解
Nov 06 Javascript
JavaScript基本语法学习教程
Jan 14 Javascript
原生态js,鼠标按下后,经过了那些单元格的简单实例
Aug 11 Javascript
微信小程序 解决swiper不显示图片的方法
Jan 04 Javascript
Vue实现购物车功能
Apr 27 Javascript
微信小程序适配iphoneX的实现方法
Sep 18 Javascript
JS实现数组深拷贝的方法分析
Mar 06 Javascript
Vue组件系列开发之模态框
Apr 18 Javascript
JS轮播图的实现方法
Aug 24 Javascript
JavaScript TAB栏切换效果的示例
Nov 05 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
php 数据库字段复用的基本原理与示例
2011/07/22 PHP
php判断并删除空目录及空子目录的方法
2015/02/11 PHP
js 替换
2008/02/19 Javascript
js/jQuery对象互转(快速操作dom元素)
2013/02/04 Javascript
javasctipt如何显示几分钟前、几天前等
2014/04/30 Javascript
node.js中的fs.utimes方法使用说明
2014/12/15 Javascript
JS交换变量的方法
2015/01/21 Javascript
JavaScript中的getDay()方法使用详解
2015/06/09 Javascript
JavaScript处理解析JSON数据过程详解
2015/09/11 Javascript
JavaScript获取当前运行脚本文件所在目录的方法
2016/02/03 Javascript
jQuery实现图片局部放大镜效果
2016/03/17 Javascript
jQuery+CSS实现一个侧滑导航菜单代码
2016/05/09 Javascript
【经典源码收藏】基于jQuery的项目常见函数封装集合
2016/06/07 Javascript
JS实现动态表格的添加,修改,删除功能(推荐)
2016/06/15 Javascript
React实现双向绑定示例代码
2016/09/19 Javascript
分析JavaScript数组操作难点
2017/12/18 Javascript
layui实现动态和静态分页
2018/04/28 Javascript
微信小程序传值以及获取值方法的详解
2019/04/29 Javascript
微信小程序开发之左右分栏效果的实例代码
2019/05/20 Javascript
详谈vue中router-link和传统a链接的区别
2020/07/22 Javascript
[00:32]10月24、25日 辉夜杯外卡赛附加赛开赛!
2015/10/23 DOTA
python自动化工具日志查询分析脚本代码实现
2013/11/26 Python
pandas string转dataframe的方法
2018/04/11 Python
Python FtpLib模块应用操作详解
2019/12/12 Python
维多利亚的秘密官方旗舰店:VICTORIA’S SECRET
2018/04/02 全球购物
个人职业生涯规划书1500字
2013/12/31 职场文书
数据保密承诺书
2014/06/03 职场文书
毕业生求职信
2014/06/10 职场文书
个人查摆问题自查报告
2014/10/16 职场文书
2014年后勤管理工作总结
2014/12/01 职场文书
民间借贷借条如何写
2015/05/26 职场文书
火烧圆明园观后感
2015/06/03 职场文书
爱国主义主题班会
2015/08/14 职场文书
2016学习依法治国心得体会
2016/01/15 职场文书
Django给表单添加honeypot验证增加安全性
2021/05/06 Python
python APScheduler执行定时任务介绍
2022/04/19 Python