<!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. Azure 基础：用 PowerShell 自动登录

    PowerShell 是管理 Azure 的最好方式,因为我们可以使用脚本把很多的工作自动化.比如把 Azure 上的虚拟机关机,并在适当的时间把它开机,这样我们就能节省一些开支,当然我们同时也为减少 ...

  2. C#连接oracle数据库提示ORA-12154: TNS: 无法解析指定的连接标识符

    C#连接oracle数据库提示ORA-12154: TNS: 无法解析指定的连接标识符如果PLSQL Develope能连接上而用代码无法连接上则可以考虑sqlnet.ora文件中是否有NAMES.D ...

  3. MySql采用GROUP_CONCAT合并多条数据显示的方法

    情况分析: 1. 表course id     name 1      课程一 ================= 2.表course_teacher id   course_id  teacher_ ...

  4. LeetCode 39. Combination Sum （组合的和）

    Given a set of candidate numbers (C) (without duplicates) and a target number (T), find all unique c ...

  5. [译]ASP.NET Core 2.0 本地文件操作

    问题 如何在ASP.NET Core 2.0中受限地访问本地目录和文件信息? 答案 新建一个空项目,修改Startup类,添加访问本地文件所需的服务: public void ConfigureSer ...

  6. tarjan求强连通分量+缩点+割点以及一些证明

    “tarjan陪伴强联通分量 生成树完成后思路才闪光 欧拉跑过的七桥古塘 让你 心驰神往”----<膜你抄>   自从听完这首歌,我就对tarjan开始心驰神往了,不过由于之前水平不足,一 ...

  7. Problem N

    Problem Description The cows have purchased a yogurt factory that makes world-famous Yucky Yogurt. O ...

  8. Go Deeper

    Go Deeper Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others) Total Sub ...

  9. 2015上海赛区B Binary Tree

    B - Binary Tree   Description The Old Frog King lives on the root of an infinite tree. According to ...

  10. YARN到底是怎么一回事？

    文章思路: 首先提出第一代MRv1(MapReduce Version1.0)的局限性,然后解释YARN是怎么克服这些局限性的,接着说了YARN的编程模型,说了YARN的组成,YARN的通信协议和YA ...