<!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. jvm - 垃圾回收

    jvm - 垃圾回收 注意 : 本系列文章为学习系列,部分内容会取自相关书籍或者网络资源,在文章中间和末尾处会有标注 垃圾回收的意义 它使得java程序员不再时时刻刻的关注内存管理方面的工作. 垃圾回 ...

  2. Java基础笔记6

    OOP(Object Oriented Programmer) 面向对象编程     面向对象编程的语言:JAVA,C#,PHP,ASP 用途:把现实中的任何对象描述成java语言. java面向对象 ...

  3. Eclipse+Spring+SpringMVC+Maven+Mybatis+MySQL+Tomcat项目搭建

    ---恢复内容开始--- 1. 建表语句及插入数据 CREATE TABLE `book_user` ( user_id INT(11) NOT NULL AUTO_INCREMENT, user_n ...

  4. R学习笔记 第五篇：数据变换和清理

    在使用R的分组操作之前,首先要了解R语言包,包实质上是实现特定功能的,预先写好的代码库(library),R拥有大量的软件包,许多包都是由某一领域的专家编写的,但并不是所有的包都有很高的质量的,在使用 ...

  5. Java反射机制能够获取的信息，与应用

    一.什么是Java反射机制? [1]反射机制是在运行状态中,对于任何一个类,都能够知道这个类的所有属性和方法: [2]对于任意一个对象,都能够调用它的任意一个属性和方法: 像这种动态获取类的信息以及动 ...

  6. Problem M

    Problem Description Accounting for Computer Machinists (ACM) has sufferred from the Y2K bug and lost ...

  7. C#设计模式之十二享元模式（Flyweight）【结构型】

    一.引言   今天我们要讲[结构型]设计模式的第六个模式,该模式是[享元模式],英文名称是:Flyweight Pattern.还是老套路,先从名字上来看看."享元"是不是可以这样 ...

  8. Problem I: STL——多重集的插入和删除

    Problem I: STL--多重集的插入和删除 Time Limit: 1 Sec  Memory Limit: 128 MBSubmit: 1729  Solved: 1258[Submit][ ...

  9. HTTPS协议，TLS协议

    一.HTTPS 协议 HTTPS协议其实就是HTTP over TSL,TSL(Transport Layer Security) 传输层安全协议是https协议的核心. TSL可以理解为SSL (S ...

  10. C语言 第三章 关系、逻辑运算与分支流程控制

    目录 一.关系运算 二.逻辑运算 三.运算优先级 四.if语句 4.0.代码块 4.1.单if语句 4.2.if else 4.3.多重if 4.4.?号:号表达式 五.switch语句 一.关系运算 ...