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


Posted in Javascript onFebruary 16, 2017

本文实例为大家分享了带有开始、暂停、清除功能的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 相关文章推荐
点图片上一页下一页翻页效果
Jul 09 Javascript
Javascript函数式编程简单介绍
Oct 11 Javascript
Javascript简单实现面向对象编程继承实例代码
Nov 27 Javascript
jquery点击改变class并toggle的实现代码
May 15 Javascript
javascript之Boolean类型对象
Jun 07 Javascript
JS 实现Base64编码与解码实例详解
Nov 07 Javascript
多个上传文件用js验证文件的格式和大小的方法(推荐)
Mar 09 Javascript
react实现菜单权限控制的方法
Dec 11 Javascript
基于js中的存储键值对以及注意事项介绍
Mar 30 Javascript
vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法
Sep 05 Javascript
微信小程序中的店铺评分组件及vue中用svg实现的评分显示组件
Nov 16 Javascript
17道题让你彻底理解JS中的类型转换
Aug 08 Javascript
js 将input框中的输入自动转化成半角大写(税号输入框)
Feb 16 #Javascript
基于JS实现翻书效果的页面切换样式
Feb 16 #Javascript
js实现3d悬浮效果
Feb 16 #Javascript
JavaScript中利用构造器函数模拟类的方法
Feb 16 #Javascript
js实现截图保存图片功能的代码示例
Feb 16 #Javascript
javaScript+turn.js实现图书翻页效果实例代码
Feb 16 #Javascript
原生JS实现图片翻书效果
Feb 16 #Javascript
You might like
php中global和$GLOBALS[]的分析之一
2012/02/02 PHP
destoon实现首页显示供应、企业、资讯条数的方法
2014/07/15 PHP
一个经典的PHP文件上传类分享
2014/11/18 PHP
php截取html字符串及自动补全html标签的方法
2015/01/15 PHP
在WordPress的文章编辑器中设置默认内容的方法
2015/12/29 PHP
简单的js分页脚本
2009/05/21 Javascript
Jquery显示和隐藏元素或设为只读(含Ligerui的控件禁用,实例说明介绍)
2013/07/09 Javascript
JavaScript常用标签和方法总结
2015/09/01 Javascript
jQuery的文档处理程序详解
2016/05/10 Javascript
jQuery点击输入框显示验证码图片
2016/05/19 Javascript
微信小程序 wx.uploadFile无法上传解决办法
2016/12/14 Javascript
touch.js 拖动、缩放、旋转 (鼠标手势)功能代码
2017/02/04 Javascript
AngularJS中ng-class用法实例分析
2017/07/06 Javascript
实例讲解DataTables固定表格宽度(设置横向滚动条)
2017/07/11 Javascript
javascript 开发之网页兼容各种浏览器
2017/09/28 Javascript
原生js实现省市区三级联动代码分享
2018/02/12 Javascript
JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能示例
2018/07/31 Javascript
解决Layui 表单提交数据为空的问题
2018/08/15 Javascript
jQuery无冲突模式详解
2019/01/17 jQuery
javascript实现简易聊天室
2019/07/12 Javascript
js获取浏览器地址(获取第1个斜杠后的内容)
2019/09/03 Javascript
[01:29:17]RNG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
对dataframe进行列相加,行相加的实例
2018/06/08 Python
关于python列表增加元素的三种操作方法
2018/08/22 Python
利用Python查看微信共同好友功能的实现代码
2019/04/24 Python
利用Python检测URL状态
2019/07/31 Python
Python中 CSV格式清洗与转换的实例代码
2019/08/29 Python
Python爬虫图片懒加载技术 selenium和PhantomJS解析
2019/09/18 Python
Python自动重新加载模块详解(autoreload module)
2020/04/01 Python
Keras官方中文文档:性能评估Metrices详解
2020/06/15 Python
python中如何打包用户自定义模块
2020/09/23 Python
英国受欢迎的运动鞋和街头服装商店:Footasylum
2018/06/12 全球购物
上海某公司.net方向笔试题
2014/09/14 面试题
商务英语专业求职信
2014/06/26 职场文书
山东省召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
抢劫罪辩护词
2015/05/21 职场文书