脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js秒表计时器

原生js实现秒表计时器功能

 更新时间：2017年02月16日 10:34:03   作者：辰晓晨  
这篇文章主要为大家详细介绍了原生js实现秒表计时器功能，可以开始、暂停、清除，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了带有开始、暂停、清除功能的js计时器，供大家参考，具体内容如下

效果图：

 

下面贴代码：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>计时器</title>
 <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=hour+'时'+minute+'分'+second+'秒'+millisecond+'毫秒';
 
  }
 
  function stop()//暂停
  {
   window.clearInterval(int);
  }
 </script>
</head>
<body>
<div style="text-align: center">
 <input type="text" id="timetext" value="00时00分00秒" readonly><br>
 <button type="button" onclick="start()">开始</button> <button type="button" onclick="stop()">暂停</button> <button type="button" onclick="Reset()">重置</button>
</div>
</body>
</html>

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

您可能感兴趣的文章:

相关文章

  • JavaScript网页表单form中禁止自动提交的两种方式

    JavaScript网页表单form中禁止自动提交的两种方式

    本文是我本人在开发网页时,在表单中加入了button按钮,本来是用于jQuery点击相应事件的按钮,然后,但我点击button时,发现不是达到jQuery指定效果,所以在本文中,我们将讨论网页表单（form）中提交的两种方式,需要的朋友可以参考下
    2024-06-06
  • 一文剖析JavaScript中闭包的难点

    一文剖析JavaScript中闭包的难点

    这篇文章主要为大家详细介绍了JavaScript中闭包的一些难点，文中的示例代码讲解详细，对我们学习JavaScript有一定帮助，需要的可以参考一下
    2022-09-09
  • IE6下通过a标签点击切换图片的问题

    IE6下通过a标签点击切换图片的问题

    IE6已经让人恶心很久了, Google旗下Youtube决定在3月13日起停止对IE6的支持. 但愿能加速IE6更换的速度.
    2010-11-11
  • 微信小程序 搜索框组件代码实例

    微信小程序 搜索框组件代码实例

    这篇文章主要介绍了微信小程序 搜索框组件代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-09-09
  • JavaScript实现百度搜索框效果

    JavaScript实现百度搜索框效果

    这篇文章主要为大家详细介绍了JavaScript实现百度搜索框效果
    ，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-05-05
  • JavaScript使用百度ECharts插件绘制饼图操作示例

    JavaScript使用百度ECharts插件绘制饼图操作示例

    这篇文章主要介绍了JavaScript使用百度ECharts插件绘制饼图操作,结合实例形式分析了JavaScript使用百度ECharts插件绘制饼图的原理、步骤及相关操作注意事项,需要的朋友可以参考下
    2019-11-11
  • javascript中的异步调用机制

    javascript中的异步调用机制

    这篇文章主要介绍了javascript中的异步调用机制,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-02-02
  • moment的一些常见用法总结大全

    moment的一些常见用法总结大全

    这篇文章主要给大家总结介绍了关于moment的一些常见用法,moment.js是一个轻量级的JavaScript时间库,对于日常开发中可能会存在获取时间、设置时间、格式化时间、比较时间等,需要的朋友可以参考下
    2023-09-09
  • javascript中innerText和innerHTML属性用法实例分析

    javascript中innerText和innerHTML属性用法实例分析

    这篇文章主要介绍了javascript中innerText和innerHTML属性用法,实例分析了javascript中innerText和innerHTML属性的作用和相关的使用技巧,需要的朋友可以参考下
    2015-05-05
  • js实现当前输入框高亮显示的方法

    js实现当前输入框高亮显示的方法

    这篇文章主要介绍了js实现当前输入框高亮显示的方法,涉及javascript针对输入框样式动态设置的技巧,非常美观大方,简单实用,需要的朋友可以参考下
    2015-08-08

最新评论