<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>
 <h1>在页面上实现一个秒表 00:00:00 （分钟:秒钟:百分秒） ，通过三个按钮（开始、停止、重置）来控制</h1>

 <p id="second_watch">00:00:00</p>

 <p>

     <input id="time_start" type="button" value="开始" onclick="time_start()" />

     <input type="button" value="停止" onclick="time_stop()" />

     <input type="button" value="重置" onclick="time_reset()" />

 </p>
 <script>

     var i1 = 0; //分钟第一位

     var i2 = 0; //分钟第二位

     var s1 = 0; //秒第一位

     var s2 = 0; //秒第二位

     var ms1 = 0; //百分秒第一位

     var ms2 = 0; //百分秒第二位

     var t;　　//计时函数保存

     function time_start(){

         document.getElementById("time_start").disabled = "true";  //开始后使开始按钮失效，防止多次点击计时加快的bug

         ms2++; //只需百分秒最后一位自加，前面依次进位

         if(ms2>9){

             ms2 = 0;

             ms1++;

         }

         if(ms1>9){

             ms1 = 0;

             s2++;

         }

         if(s2>9){

             s2 = 0;

             s1++;

         }

         if(s1>5){

             s1 = 0;

             i2++;

         }

         if(i2>9){

             i2 = 0;

             i1++;

         }

         if(i1>5){

             //超出秒表计数范围

             clearTimeout(t);

             return false;

         }

         document.getElementById("second_watch").innerHTML = ""+i1+i2+":"+s1+s2+":"+ms1+ms2+"";

         document.getElementById("second_watch").style.color = "black";

         t = setTimeout("time_start()",10);　　//百分秒百分之一秒执行一次

     }

     function time_stop(){

         clearTimeout(t);

         document.getElementById("second_watch").style.color = "red";

         document.getElementById("time_start").disabled = ""; //停止时恢复按钮功能

     }

     function time_reset(){

         clearTimeout(t);

         i1 = 0;

         i2 = 0;

         s1 = 0;

         s2 = 0;

         ms1 = 0;

         ms2 = 0;

         document.getElementById("second_watch").innerHTML = ""+i1+i2+":"+s1+s2+":"+ms1+ms2+"";

         document.getElementById("second_watch").style.color = "black";

         document.getElementById("time_start").disabled = "";

     }

 </script>

 </body>

 </html>

js计时函数实现秒表的开始-暂停-清零功能的更多相关文章

  1. HTML5超酷秒表动画 可暂停和重置秒表

    关于HTML5和CSS3的时钟应用在之前我们已经分享过不少了,还有一些HTML5的日期选择应用.今天我们要分享一款基于HTML5和CSS3的圆盘秒表动画,秒表可以精确到0.001秒,并且可以在计时过程 ...

  2. js防抖函数

    一.什么是函数防抖 概念:函数防抖(debounce),就是指触发事件后,在 n 秒内函数只能执行一次,如果触发事件后在 n 秒内又触发了事件,则会重新计算函数延执行时间. 举个栗子,坐电梯的时候,如 ...

  3. JS回调函数全解析教程

    转自:http://blog.csdn.net/lulei9876/article/details/8494337 自学jQuery的时候,看到一英文词(Callback),顿时背部隐隐冒冷汗.迅速g ...

  4. 学习js回调函数

    <!DOCTYPE HTML> <html> <head> <meta charset="GBK" /> <title> ...

  5. 如何理解JS回调函数

    1.回调函数英文解释: A callback is a function that is passed as an argument to another function and is execut ...

  6. Atitit java方法引用(Method References) 与c#委托与脚本语言js的函数指针

    Atitit java方法引用(Method References) 与c#委托与脚本语言js的函数指针   1.1. java方法引用(Method References) 与c#委托与脚本语言js ...

  7. 【转】关于URL编码/javascript/js url 编码/url的三个js编码函数

    来源:http://www.cnblogs.com/huzi007/p/4174519.html 关于URL编码/javascript/js url 编码/url的三个js编码函数escape(),e ...

  8. js引出函数概念的案例

    js引出函数概念的案例   1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8&q ...

  9. Windows及Linux平台下的计时函数总结

    本文对Windows及Linux平台下常用的计时函数进行总结,包括精度为秒.毫秒.微秒三种精度的各种函数.比如Window平台下特有的Windows API函数GetTickCount().timeG ...

随机推荐

  1. Python Nose框架编写测试用例方法

    1. 关于Nose nose项目是于2005年发布的,也就是 py.test改名后的一年.它是由 Jason Pellerin 编写的,支持与 py.test 相同的测试习惯做法,但是这个包更容易安装 ...

  2. 网页单位和rem小分享

    有哪些网页尺寸单位? CSS 中的单位有很多种: 百分比(%) 英寸(in) 厘米(cm) 毫米(mm) 磅数(pt) 12 点活字(pc) 字母高度一半(ex) 父级字体(em) 像素(px) 根元 ...

  3. Memcached理解

    一.Memcached简介: 1. Memcached是一个自由开源的,高性能的,分布式内存对象缓存系统. 2. Memcached是一种基于内存的key-value存储,用来存储小块的任意数据(字符 ...

  4. Appium python自动化测试系列之页面滑动原理讲解（十）

    10.1.1 页面滑动原理分析 在页面滑动查找章节我们就讲了滑动的知识点,只是不知道大家是否有认真练习以及去理解,如果你认真练习.理解了那么我相信这一章节的东西不用看也能够完成,下面我们还是简单分析一 ...

  5. 每天一个linux命令（26）：用SecureCRT来上传和下载文件（转载自竹子）

    用SSH管理linux服务器时经常需要远程与本地之间交互文件.而直接用SecureCRT自带的上传下载功能无疑是最方便的,SecureCRT下的文件传输协议有ASCII.Xmodem.Zmodem. ...

  6. 利用Tkinter和matplotlib两种方式画饼状图

    当我们学习python的时候,总会用到一些常用的模块,接下来我就详细讲解下利用两种不同的方式画饼状图.首先利用[Tkinter]中的canvas画布来画饼状图: from tkinter import ...

  7. Akka（35）： Http：Server side streaming

    在前面几篇讨论里我们都提到过:Akka-http是一项系统集成工具库.它是以数据交换的形式进行系统集成的.所以,Akka-http的核心功能应该是数据交换的实现了:应该能通过某种公开的数据格式和传输标 ...

  8. Flex布局语法

    flexbox 弹性盒布局和布局原理 新版的flexbox规范分两部分:一部分是container,一部分是 items. flexbox是一整套布局规范,包含了多个css属性,所以学习起来比`flo ...

  9. indexed database IndexedDB

    Indexed Database API 目的是提供一个可供javascript存储和检索对象,并且还能进行查询,搜索等数据库操作   设计为几乎完全异步,因此绝大部分操作都稍后执行,因此每次操作都应 ...

  10. HTTPCLIENT 模拟登陆

    第一步构建忽略https验证的httpclient public static CloseableHttpClient getHttpClient() throws Exception { SSLCo ...