原生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 动态table添加colspan\rowspan 参数的方法
Jul 25 Javascript
基于jquery实现拆分姓名的方法(纯JS版)
May 08 Javascript
jquery中加载图片自适应大小主要实现代码
Aug 23 Javascript
用Jquery实现滚动新闻
Feb 12 Javascript
JavaScript实现班级随机点名小应用需求的具体分析
May 12 Javascript
浅谈jQuery事件绑定原理
Jan 02 Javascript
jQuery插件multiScroll实现全屏鼠标滚动切换页面特效
Apr 12 Javascript
js实现精确到秒的日期选择器完整实例
Apr 30 Javascript
BootStrap实现树形目录组件代码详解
Jun 21 Javascript
jQuery将表单序列化成一个Object对象的实例
Nov 29 Javascript
vue-router路由参数刷新消失的问题解决方法
Jun 17 Javascript
vue调用本地摄像头实现拍照功能
Aug 14 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函数
2006/10/09 PHP
CodeIgniter中实现泛域名解析
2014/07/19 PHP
PHP IDE phpstorm 常用快捷键
2015/05/18 PHP
php + nginx项目中的权限详解
2017/05/23 PHP
Laravel 批量更新多条数据的示例
2017/11/27 PHP
php+lottery.js实现九宫格抽奖功能
2019/07/21 PHP
laravel实现图片上传预览,及编辑时可更换图片,并实时变化的例子
2019/11/14 PHP
javascript Array.sort() 跨浏览器下需要考虑的问题
2009/12/07 Javascript
javascript动态向网页中添加表格实现代码
2014/02/19 Javascript
jQuery 删除或是清空某个HTML元素示例
2014/08/04 Javascript
js构造函数、索引数组和属性的实现方式和使用
2014/11/16 Javascript
JS+CSS实现大气的黑色首页导航菜单效果代码
2015/09/10 Javascript
jQuery使用经验小技巧(推荐)
2016/05/31 Javascript
jQuery实现复选框的全选和反选
2017/02/02 Javascript
vue如何实现observer和watcher源码解析
2017/03/09 Javascript
基于jstree使用AJAX请求获取数据形成树
2017/08/29 Javascript
详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
2018/10/12 Javascript
vue + typescript + video.js实现 流媒体播放 视频监控功能
2019/07/07 Javascript
vue项目中全局引入1个.scss文件的问题解决
2019/08/01 Javascript
python中format()函数的简单使用教程
2018/03/14 Python
python使用magic模块进行文件类型识别方法
2018/12/08 Python
linux查找当前python解释器的位置方法
2019/02/20 Python
Python3.5 Pandas模块之Series用法实例分析
2019/04/23 Python
python数组循环处理方法
2019/08/26 Python
Django使用消息提示简单的弹出个对话框实例
2019/11/15 Python
Python PyQt5模块实现窗口GUI界面代码实例
2020/05/12 Python
anaconda升级sklearn版本的实现方法
2021/02/22 Python
纯CSS3制作的鼠标悬停时边框旋转
2017/01/03 HTML / CSS
趣天网日本站:Qoo10 JP
2019/09/18 全球购物
申报职称专业技术个人的自我评价
2013/12/12 职场文书
python中sys模块的介绍与实例
2021/04/17 Python
pytorch实现手写数字图片识别
2021/05/20 Python
Windows安装Anaconda3的方法及使用过程详解
2021/06/11 Python
Java中API的使用方法详情
2022/04/06 Java/Android
Python进程间的通信之语法学习
2022/04/11 Python
python模板入门教程之flask Jinja
2022/04/11 Python