原生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 相关文章推荐
jQuery 技巧大全(新手入门篇)
May 12 Javascript
js 动态修改css文件用到了cssRule
Aug 20 Javascript
常常会用到的截取字符串substr()、substring()、slice()方法详解
Dec 16 Javascript
详解Jquery实现ready和bind事件
Apr 14 Javascript
javascript如何创建对象
Aug 29 Javascript
Bootstrap CSS组件之下拉菜单(dropdown)
Dec 17 Javascript
vue实现百度搜索下拉提示功能实例
Jun 14 Javascript
VUE饿了么树形控件添加增删改功能的示例代码
Oct 17 Javascript
Bootstrap的aria-label和aria-labelledby属性实例详解
Nov 02 Javascript
ES6学习笔记之字符串、数组、对象、函数新增知识点实例分析
Jan 22 Javascript
JavaScript实现简易聊天对话框(加滚动条)
Feb 10 Javascript
javascript异常处理实现原理详解
Feb 17 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学习 变量使用总结
2011/03/24 PHP
PHP句法规则详解 入门学习
2011/11/09 PHP
php使用百度翻译api示例分享
2014/01/31 PHP
通过修改Laravel Auth使用salt和password进行认证用户详解
2017/08/17 PHP
PHP对称加密算法(DES/AES)类的实现代码
2017/11/14 PHP
PHP使用文件锁解决高并发问题示例
2018/03/29 PHP
php中curl和soap方式请求服务超时问题的解决
2018/06/11 PHP
PHP日志LOG类定义与用法示例
2018/09/06 PHP
详解PHP变量传值赋值和引用赋值变量销毁
2019/03/23 PHP
PHP pthreads v3下worker和pool的使用方法示例
2020/02/21 PHP
PHP连接MySQL数据库三种实现方法
2020/12/10 PHP
如何用JavaScript动态呼叫函数(两种方式)
2013/05/03 Javascript
windows8.1+iis8.5下安装node.js开发环境
2014/12/12 Javascript
浅析JavaScript访问对象属性和方法及区别
2015/11/16 Javascript
js判断数组key是否存在(不用循环)的简单实例
2016/08/03 Javascript
详解如何在NodeJS项目中优雅的使用ES6
2017/04/22 NodeJs
Kindeditor单独调用单图上传增加预览功能的实例
2017/07/31 Javascript
JavaScript面向对象精要(下部)
2017/09/12 Javascript
vue如何通过id从列表页跳转到对应的详情页
2018/05/01 Javascript
node.js到底要不要加分号浅析
2018/07/11 Javascript
如何从零开始手写Koa2框架
2019/03/22 Javascript
[51:26]VP vs VG 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python常见文件操作的函数示例代码
2011/11/15 Python
Python的Django框架中的Context使用
2015/07/15 Python
OpenCV搞定腾讯滑块验证码的实现代码
2019/05/18 Python
对python 树状嵌套结构的实现思路详解
2019/08/09 Python
python小项目之五子棋游戏
2019/12/26 Python
在tensorflow中实现屏蔽输出的log信息
2020/02/04 Python
Python切片列表字符串如何实现切换
2020/08/06 Python
canvas中普通动效与粒子动效的实现代码示例
2019/01/03 HTML / CSS
电大自我鉴定范文
2013/10/01 职场文书
预备党员学习十八届三中全会精神思想汇报
2014/09/13 职场文书
环保宣传语大全
2015/07/13 职场文书
MySQL中B树索引和B+树索引的区别详解
2022/03/03 MySQL
《传颂之物 虚伪的假面》BD发售宣传CM公开
2022/04/04 日漫
python 判断字符串当中是否包含字符(str.contain)
2022/06/01 Python