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 相关文章推荐
仿猪八戒网左下角的文字滚动效果
Oct 28 Javascript
复制js对象方法(详解)
Jul 08 Javascript
jQuery截取指定长度字符串代码
Aug 21 Javascript
如何在Linux上安装Node.js
Apr 01 Javascript
jquery使用Cookie和JSON记录用户最近浏览历史
Apr 19 Javascript
学习vue.js中class与style绑定
Dec 03 Javascript
vue2.0结合Element实现select动态控制input禁用实例
May 12 Javascript
vue cli2.0单页面title修改方法
Jun 07 Javascript
使用Node搭建reactSSR服务端渲染架构
Aug 30 Javascript
JavaScript实现多张图片放大镜效果示例【不限定图片尺寸,rem单位】
May 14 Javascript
jQuery实现判断滚动条滚动到document底部的方法分析
Aug 27 jQuery
基于Vue CSR的微前端实现方案实践
May 27 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下拉选项的批量操作的实现代码
2013/10/14 PHP
phpmailer简单发送邮件的方法(附phpmailer源码下载)
2016/06/13 PHP
PHP简单预防sql注入的方法
2016/09/27 PHP
php对微信支付回调处理的方法
2018/08/23 PHP
PHP中用Trait封装单例模式的实现
2019/12/18 PHP
JScript中使用ADODB.Stream判断文件编码的代码
2008/06/09 Javascript
jQuery下通过$.browser来判断浏览器.
2011/04/05 Javascript
关于跨站脚本攻击问题
2011/12/22 Javascript
DOM2非标准但却支持很好的几个属性小结
2012/01/21 Javascript
js的隐含参数(arguments,callee,caller)使用方法
2014/01/28 Javascript
将JavaScript的jQuery库中表单转化为JSON对象的方法
2015/11/17 Javascript
jQuery插件jquery-barcode实现条码打印的方法
2015/11/25 Javascript
jquery实现下拉框功能效果【实例代码】
2016/05/06 Javascript
JS & JQuery 动态添加 select option
2016/06/08 Javascript
再次谈论Javascript中的this
2016/06/23 Javascript
jquery判断iPhone、Android设备类型
2016/09/14 Javascript
jQuery图片加载显示loading效果
2016/11/04 Javascript
vue项目中自定义video视频控制条的实现代码
2020/04/26 Javascript
JavaScript 链表定义与使用方法示例
2020/04/28 Javascript
python3编写C/S网络程序实例教程
2014/08/25 Python
用Python中的__slots__缓存资源以节省内存开销的方法
2015/04/02 Python
Python 通过URL打开图片实例详解
2017/06/01 Python
浅谈python可视化包Bokeh
2018/02/07 Python
python 实现在txt指定行追加文本的方法
2018/04/29 Python
python 图像平移和旋转的实例
2019/01/10 Python
Python 变量的创建过程详解
2019/09/02 Python
python tornado修改log输出方式
2019/11/18 Python
python实现智能语音天气预报
2019/12/02 Python
python获取响应某个字段值的3种实现方法
2020/04/30 Python
幼儿园春季开学寄语
2014/04/03 职场文书
2014年幼儿园个人工作总结
2014/11/10 职场文书
初中家长意见
2015/06/03 职场文书
校运会班级霸气口号
2015/12/24 职场文书
比赛口号霸气押韵
2015/12/24 职场文书
python自动化操作之动态验证码、滑动验证码的降噪和识别
2021/08/30 Python
MySQL自定义函数及触发器
2022/08/05 MySQL