js实现计时器秒表功能

 更新时间:2019年12月16日 08:39:22   作者:艾小逗  
这篇文章主要为大家详细介绍了js实现计时器秒表功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了js实现计时器秒表功能的具体代码,供大家参考,具体内容如下

HTML

<input type="text" id="timetext" value="00:00:00" readonly>
<button type="button" onclick="start()">开始</button> 
<button type="button" onclick="stop()">暂停</button> 
<button type="button" onclick="Reset()">重置</button>

Script

<script>
  var hour,minute,second;//时 分 秒
  hour=minute=second=0;//初始化
  var millisecond=0;//毫秒
  var int;
  function Reset()//重置
  {
   window.clearInterval(int);
   millisecond=hour=minute=second=0;
   document.getElementById('timetext').value='00:00:00:000';
  }
 
  function start()//开始
  {
   int=setInterval(timer,50);
  }
 
  function timer()//计时
  {
   millisecond=millisecond+50;
   if(millisecond>=1000)
   {
    millisecond=0;
    second=second+1;
   }
   if(second>=60)
   {
    second=0;
    minute=minute+1;
   }
 
   if(minute>=60)
   {
    minute=0;
    hour=hour+1;
   }
   document.getElementById('timetext').value=toDub(hour)+':'+toDub(minute)+':'+toDub(second);
 
  }

  function stop()//暂停
  {
   window.clearInterval(int);
  }
  //补零
  function toDub(n){
    return n<10?"0"+n:""+n;
  }
</script>

如图:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • javascript学习之json入门

    javascript学习之json入门

    本文主要对javascript中的JSON进行详细介绍。相信对于初学者具有很好的参考价值,下面就跟着小编一起来看下吧
    2016-12-12
  • uniapp项目优化方式及建议

    uniapp项目优化方式及建议

    性能优化自古以来就是重中之重,本文关于uniapp项目优化方式最全整理,会根据开发情况进行补充,感兴趣的可以了解一下
    2021-08-08
  • JavaScript正则表达式小结(test|match|search|replace|split|exec)

    JavaScript正则表达式小结(test|match|search|replace|split|exec)

    这篇文章主要介绍了JavaScript正则表达式小结(test|match|search|replace|split|exec)的相关资料,非常不错,具有参考借鉴价值,需要的朋友参考下吧
    2016-12-12
  • 公众号SVG动画交互实战代码

    公众号SVG动画交互实战代码

    这篇文章主要介绍了公众号SVG动画交互实战代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-05-05
  • js+css简单实现网页换肤效果

    js+css简单实现网页换肤效果

    这篇文章主要介绍了js+css简单实现网页换肤效果的方法,涉及JavaScript响应鼠标事件动态遍历及修改页面元素样式的相关技巧,需要的朋友可以参考下
    2015-12-12
  • JavaScript实现生成GUID(全局统一标识符)

    JavaScript实现生成GUID(全局统一标识符)

    这篇文章主要介绍了JavaScript实现生成GUID(全局统一标识符),本文写成了一个GUID生成类,使用也非常方便,需要的朋友可以参考下
    2014-09-09
  • 微信小程序开发中生命周期的详细介绍

    微信小程序开发中生命周期的详细介绍

    生命周期是指一个对象从创建→>运行>销毁的整个阶段,强调的是一个时间段,文中介绍了小程序中组件的生命周期,需要的朋友可以参考下
    2023-03-03
  • JS 实现缓存算法的示例(FIFO/LRU)

    JS 实现缓存算法的示例(FIFO/LRU)

    这篇文章主要介绍了JS 实现缓存算法的示例(FIFO/LRU),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • JavaScript制作淘宝星级评分效果的思路

    JavaScript制作淘宝星级评分效果的思路

    这篇文章主要介绍了JavaScript制作淘宝星级评分效果的整个思考过程,思路很清晰,并附带了完整的程序源码,感兴趣的小伙伴们可以参考一下
    2015-11-11
  • JavaScript移动端常用事件之touch触摸事件详解

    JavaScript移动端常用事件之touch触摸事件详解

    触屏事件touch也称为触摸事件,touch对象代表一个触摸点,触摸点可能是一根手指,也可能是一根触摸笔,触屏事件可响应用户手指(或触摸笔)对屏幕或者触控板操作,下面这篇文章主要给大家介绍了关于JavaScript移动端常用事件之touch触摸事件的相关资料,需要的朋友可以参考下
    2022-10-10

最新评论