<!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. C# AOP 面向切面编程之 调用拦截

    有时候我们需要在代码中对方法调用进行拦截,并修改参数和返回值,这种操作叫做AOP(面向切面编程) 不过需要注意的是,AOP的效率很慢,在需要高效率场合慎用. 以下是C#的AOP方法: 首先建立一个控制 ...

  2. LeetCode 538. Convert BST to Greater Tree （把二叉搜索树转换成较大树）

    Given a Binary Search Tree (BST), convert it to a Greater Tree such that every key of the original B ...

  3. js获取本地ip和地区

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. C语言学习（记录）【内存相关_1:内存基础】

    本学习是基于嵌入式的C语言学习记录(课程内容来源于某位老师的网络课程,为了证明不是在打广告,就不写出老师的名字了,感谢.) -------------------------------------- ...

  5. 三、第一个IDEA创建的MAVEN工程——JavaWeb点滴

    一.Maven是什么? Maven是一个项目管理工具,它包含了一个项目对象模型 (Project Object Model),一组标准集合,一个项目生命周期(Project Lifecycle),一个 ...

  6. Oracle 表空间扩充

    Oracle 表空间扩充 一.现场环境: (1)操作系统:AIX (2)数据库:Oracle Database 10g Enterprise Edition Release 10.2.0.5.0 - ...

  7. Building Block

    Building Block Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Tota ...

  8. XML之外部DTD和内部DTD

    DTD(Document Type Definition):文档类型定义,可以定义合法的XML文档结构,它使用一系列合法元素来定义文档的结构.DTD分为内部DTD和外部DTD,所谓内部DTD是指该DT ...

  9. 记录我发现的第一个关于 Google 的 Bug

    先贴上 Bug 链接: https://issuetracker.google.com/issues/68969655 Bug 本身是很简单的,就是 Google 的 Android 在线参考文档中, ...

  10. 【Spring】Spring MVC高级技术

    前言 前面学习了简单的Spring Web知识,接着学习更高阶的Web技术. 高级技术 Spring MVC配置的替换方案 自定义DispatcherServlet配置 在第五章我们曾编写过如下代码. ...