原生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 相关文章推荐
用javascript获取当页面上鼠标光标位置和触发事件的对象的代码
Dec 09 Javascript
myEvent.js javascript跨浏览器事件框架
Oct 24 Javascript
Javascript脚本实现静态网页加密实例代码
Nov 05 Javascript
解析JSON对象与字符串之间的相互转换
Dec 18 Javascript
javascript动态添加、修改、删除对象的属性与方法详解
Jan 27 Javascript
关于javaScript注册click事件传递参数的不成功问题
Jul 18 Javascript
JavaScript实现将文本框的值插入指定位置的方法
Aug 13 Javascript
微信小程序 UI布局常用技巧整理总结
Dec 05 Javascript
vue移动端屏幕适配详解
Apr 30 Javascript
Vue实现表格批量审核功能实例代码
May 28 Javascript
layui自定义验证,用ajax查询后台是否有重复数据,form.verify的例子
Sep 06 Javascript
Vue项目配置跨域访问和代理proxy设置方式
Sep 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 Google的translate API代码
2008/12/10 PHP
smarty模板引擎之分配数据类型
2015/03/30 PHP
JavaScript 计算当天是本年本月的第几周
2009/03/22 Javascript
Prototype Array对象 学习
2009/07/19 Javascript
javascript 利用Image对象实现的埋点(某处的点击数)统计
2012/12/28 Javascript
判断iframe里的页面是否加载完成
2014/06/06 Javascript
Angular的模块化(代码分享)
2016/12/26 Javascript
canvas知识总结
2017/01/25 Javascript
详解Node.js实现301、302重定向服务
2017/04/07 Javascript
Angular 2 ngForm中的ngModel、[ngModel]和[(ngModel)]的写法
2017/06/29 Javascript
Javascript es7中比较实用的两个方法示例
2017/07/21 Javascript
vue中使用带隐藏文本信息的图片、图片水印的方法
2020/04/24 Javascript
vue使用better-scroll实现滑动以及左右联动
2020/06/30 Javascript
js实现简易ATM功能
2020/10/27 Javascript
[01:06:59]完美世界DOTA2联赛PWL S2 Magma vs FTD 第一场 11.29
2020/12/02 DOTA
Python 随机生成中文验证码的实例代码
2013/03/20 Python
Python简单计算给定某一年的某一天是星期几示例
2018/06/27 Python
pytorch 数据集图片显示方法
2018/07/26 Python
python如何制作缩略图
2019/04/30 Python
使用Python的OpenCV模块识别滑动验证码的缺口(推荐)
2019/05/10 Python
Python实现最常见加密方式详解
2019/07/13 Python
Python 爬虫实现增加播客访问量的方法实现
2019/10/31 Python
TensorFlow 读取CSV数据的实例
2020/02/05 Python
Python xpath表达式如何实现数据处理
2020/06/13 Python
python合并多个excel文件的示例
2020/09/23 Python
PHP如何删除一个Cookie值
2012/11/15 面试题
模具数控专业自荐信
2014/01/27 职场文书
现场施工员岗位职责
2014/03/10 职场文书
12岁生日演讲稿
2014/05/14 职场文书
给学校的建议书范文
2014/05/15 职场文书
2014年科室工作总结
2014/11/20 职场文书
工作保证书
2015/01/17 职场文书
个人党性锻炼总结
2015/03/05 职场文书
2015初中政教处工作总结
2015/07/21 职场文书
《落花生》教学反思
2016/02/16 职场文书
KVM基础命令详解
2022/04/30 Servers