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>

如图:

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

相关文章

  • bootstrapValidator自定验证方法写法

    bootstrapValidator自定验证方法写法

    这篇文章主要为大家详细介绍了bootstrapValidator自定验证方法写法,研究bootstrapValidator验证,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • JS中的二叉树遍历详解

    JS中的二叉树遍历详解

    这篇文章主要为大家详细介绍了JS中的二叉树遍历,何为二叉树,什么是二叉树的遍历,感兴趣的小伙伴们可以参考一下
    2016-03-03
  • 基于Three.js插件制作360度全景图

    基于Three.js插件制作360度全景图

    这篇文章主要介绍了基于Three.js插件制作的360度全景图,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-11-11
  • 微信小程序实现简单的摇骰子游戏

    微信小程序实现简单的摇骰子游戏

    这篇文章主要为大家详细介绍了微信小程序实现简单的摇骰子游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-05-05
  • Javascript的并行运算实现代码

    Javascript的并行运算实现代码

    随着多核cpu的普级,并发/并行多线程运算在主流的编程语言越来越流行,而在目前Javascript实现中还看不到在语言方面支持多线程,现在Javascript如此流行,真希望今后会在语言的层面有很大的变化.
    2010-11-11
  • uni-app 项目中 “文件查找失败:‘crypto-js‘“ 的问题及解决方法

    uni-app 项目中 “文件查找失败:‘crypto-js‘“ 的问题及解决方法

    在开发使用 uni-app 框架的项目时,遇到依赖问题是常见的,本文将介绍如何解决编译过程中出现的 “文件查找失败:‘crypto-js’” 错误,并说明这种错误为什么会发生以及如何避免,下面分步骤给大家带来解决方案,感兴趣的朋友一起看看吧
    2024-07-07
  • 使用堆实现Top K算法(JS实现)

    使用堆实现Top K算法(JS实现)

    这篇文章主要介绍了使用堆实现Top K算法,即JS实现,文中详细介绍了Top K算法,感兴趣的小伙伴们可以参考一下
    2015-12-12
  • js is_valid_filename验证文件名的函数

    js is_valid_filename验证文件名的函数

    有时候我们需要对文件名进行控制,包括一些特殊命名的文件与特殊符号的文件名进程替换,那么就可以使用下面的函数
    2017-07-07
  • JavaScript中apply方法的应用技巧小结

    JavaScript中apply方法的应用技巧小结

    这篇文章给大家总结了在js中apply方法的一些应用技巧,通过这些技巧对大家日常的使用相信会有帮助,有需要的朋友们下面来一起看看吧。
    2016-09-09
  • 解决layui的input独占一行的问题

    解决layui的input独占一行的问题

    今天小编就为大家分享一篇解决layui的input独占一行的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09

最新评论