1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
  6.     <title>stop watch</title>
  7.     <!--by 0o晓月メ http://www.cnblogs.com/final-elysion/p/6066358.html -->
  8.     <script type="text/javascript">
  9.         //起始计时时间
  10.         var totalStartTime = null;
  11.         var countStartTime = null;
  13.         //暂停时的时间
  14.         var stopCountTime = 0;
  15.         var stopTotalTime = 0;
  17.         //保存的计次时间列表
  18.         var countList = [];
  20.         //循环指针
  21.         var changeTime = null;
  22.         var addnewValue = false;
  23.         var begin = false;
  24.         //label & 缓存已经使用的时间
  25.         var countTime = null;
  26.         var totalTime = null;
  28.         beginChange = function(){
  29.             //设置标志位进行控制,避免多线程造成的变量问题
  30.             begin = true;
  31.             changeTime = setInterval(changeStopWatch,10);
  33.             document.getElementById('begin').disabled = true;
  34.             document.getElementById('stop').disabled = false;
  35.             document.getElementById('commit').disabled = false;
  36.             document.getElementById('reset').disabled = true;
  37.         }
  39.         /**
  40.          * 计时器核心方法
  41.          */
  42.         changeStopWatch = function(){
  43.             if(begin){
  44.                 totalStartTime = new Date();
  45.                 countStartTime = totalStartTime;
  46.                 begin = false;
  47.             }else if(addnewValue){
  48.                 //重设新的起始时间 暂停的时间点
  49.                 countStartTime = new Date();
  50.                 stopCountTime = 0;
  51.                 addnewValue = false;
  52.             }
  54.             var now = new Date();
  55.             var tempTotal = (now.getTime() - totalStartTime.getTime())/1000 + stopTotalTime;
  56.             var tempCount = (now.getTime() - countStartTime.getTime())/1000 + stopCountTime;
  57.             tempTotal = Math.floor(tempTotal * 100) / 100;
  58.             tempCount = Math.floor(tempCount * 100) / 100;
  59.             //多线程问题有时候会出现这情况
  60.             if(tempTotal < 0 || tempCount < 0){
  61.                 console.log('bug')
  62.                 return ;
  63.             }
  64.             setTotalTime(tempTotal);
  65.             setCountTime(tempCount);
  66.         }
  68.         stopChange = function(){
  69.             clearInterval(changeTime);
  71.             stopCountTime = countTime;
  72.             stopTotalTime = totalTime;
  74.             document.getElementById('begin').disabled = false;
  75.             document.getElementById('stop').disabled = true;
  76.             document.getElementById('commit').disabled = true;
  77.             document.getElementById('reset').disabled = false;
  78.         }
  80.         addNewValue = function (){
  81.             //缓存添加的时间
  82.             var newValue = countTime;
  83.             countList.push(newValue);
  85.             //设置标志位进行控制,避免多线程造成的变量问题
  86.             addnewValue = true;
  88.             //刷新页面
  89.             setNewValue(newValue);
  90.             changeAverage();
  91.         }
  93.         changeAverage = function(){
  94.             var total = 0,
  95.                 i = 0;
  96.             for(;i<countList.length; i++){
  97.                 total = total +countList[i];
  98.             }
  99.             var result = Math.floor(total/i * 100) / 100;
  100.             document.getElementById('average').innerText = secondToTime(result);
  101.             document.getElementById('average-second').innerText = result;
  102.         }
  104.         resetStopWatch = function(){
  105.             totalStartTime = 0;
  106.             countStartTime = 0;
  107.             stopCountTime = 0;
  108.             stopTotalTime = 0;
  109.             countList = [];
  110.             changeTime = null;
  112.             addnewValue = false;
  113.             begin = false;
  115.             setCountTime(0);
  116.             setTotalTime(0);
  118.             document.getElementById('result').innerHTML = "";
  119.             document.getElementById('average').innerText = "00:00:00.00";
  120.             document.getElementById('result-second').innerHTML = "";
  121.             document.getElementById('average-second').innerText = "0";
  122.         }
  124.         function secondToTime(time) {
  125.             var result = "";
  126.             if (null != time && "" != time && time > 0) {
  127.                 //hour
  128.                 if (time >= 60 * 60) {
  129.                     result = parseInt(time / 3600);
  130.                     if(result< 10){
  131.                         result = "0" + result + ":";
  132.                     }else{
  133.                         result = result + ":"
  134.                     }
  135.                 }else{
  136.                     result = "00:"
  137.                 }
  139.                 //min
  140.                 if (time >= 60) {
  141.                     var tempMin = parseInt((time - parseInt(time / 3600) * 3600 )/ 60) ;
  142.                     if(tempMin < 10){
  143.                         tempMin = "0" + tempMin + ":";
  144.                     }else{
  145.                         tempMin = tempMin + ":"
  146.                     }
  147.                     result = result + tempMin;
  148.                 }else{
  149.                     result = result + "00:";
  150.                 }
  152.                 //second
  154.                 var timeStr = time + "";
  155.                 var tempSecond = parseInt(time%60);
  157.                 if(tempSecond < 10){
  158.                     tempSecond = "0" + tempSecond;
  159.                 }
  160.                 if(timeStr.indexOf(".") >= 0){
  161.                     tempSecond = tempSecond + timeStr.substring(timeStr.indexOf("."),timeStr.length);
  162.                 }
  163.                 result = result + tempSecond;
  165.             }else{
  166.                 result = "00:00:00.00";
  167.             }
  168.             return result;
  169.         }
  171.         getCountTime = function(){
  172.             return document.getElementById('count-Time');
  173.         }
  175.         setCountTime = function(value){
  176.             countTime = value;
  177.             document.getElementById('count-second-Time').innerText = value;
  178.             document.getElementById('count-Time').innerText = secondToTime(value);
  179.         }
  181.         getTotalTime = function(){
  182.             return document.getElementById('total-Time');
  183.         }
  185.         setTotalTime = function(value){
  186.             totalTime = value;
  188.             document.getElementById('total-Time').innerText = secondToTime(value);
  189.             document.getElementById('total-second-Time').innerText = value;
  191.         }
  193.         setNewValue = function(value){
  194.             var newNode = document.createElement("div");
  195.             newNode.innerHTML = secondToTime(value);
  197.             var oldNode = document.getElementById('result');
  198.             oldNode.appendChild(newNode);
  200.             var newNode2 = document.createElement("div");
  201.             newNode2.innerHTML = value;
  203.             var oldNode2 = document.getElementById('result-second');
  204.             oldNode2.appendChild(newNode2);
  205.         }
  207.     </script>
  208.   </head>
  210.   <body >
  211.     <div style="width: 430px;border-width: 2px;border-style: solid;padding: 10px 10px 10px 10px;">
  212.         <input type="button" id ="begin" value="启动" onclick="beginChange()"/>
  213.         <input type="button" id = "stop" value="停止" disabled="true" onclick="stopChange()"/>
  214.         <input type="button" id = "commit" value="计次"  disabled="true" onclick="addNewValue()"/>
  215.         <input type="button" id = "reset" value="重置"  disabled="true" onclick="resetStopWatch()"/>
  216.         <br />
  218.         <div style="width:200px;margin-top:10px;" >
  219.             <div style="padding-top:20px;">当前次数计时</div>
  220.             <div id="count-Time" >
  221.                 00:00:00.00
  222.             </div>
  223.             <div style="padding-top:20px;">总时间计时</div>
  224.             <div id="total-Time" >
  225.                 00:00:00.00
  226.             </div>
  227.             <div style="padding-top:20px;">
  228.                 <div>平均值</div>
  229.                 <div id ="average" >00:00:00.00</div>
  230.             </div>
  231.         </div>
  233.         <div style="width: 200px;position: absolute;left: 300px;top: 50px;" >
  234.             <div style="padding-top:20px;">当前次数计时(秒)</div>
  235.             <div id="count-second-Time">
  236.                 0
  237.             </div>
  239.             <div style="padding-top:20px;">总时间计时(秒)</div>
  240.             <div id="total-second-Time">
  241.                 0
  242.             </div>
  243.             <div style="padding-top:20px;">
  244.                 <div>平均值(秒)</div>
  245.                 <div id ="average-second" >0</div>
  246.             </div>
  247.         </div>
  248.     </div>
  250.     <div style="width:200px;margin-top:21px;">
  251.         添加的次数列表
  252.         <div id="result"  >
  254.         </div>
  255.     </div>
  257.     <div style="width: 200px;position: absolute;left: 300px;top:253px;">
  258.         添加的次数列表(秒)
  259.         <div id="result-second"  >
  261.         </div>
  262.     </div>
  264.   </body>
  265. </html>

js实现类似iphone的秒表-添加平均数功能的更多相关文章

  1. JS为Select下拉框添加输入功能

    JavaScript使用parentNode.nextSibling.value实现的本功能,实际上你会发现网页上有两个控件元素,一个是Select,一个是input,使用CSS将input覆盖于se ...

  2. Expression Blend 的点滴（4）--创建类似iPhone屏幕锁控件（下）

    原文:Expression Blend 的点滴(4)--创建类似iPhone屏幕锁控件(下) 接着上篇... 接下去,将一步步演示如果创建当点击checkBox后,其中的按钮由左边滑动到右边,表示处于 ...

  3. (vue.js)axios interceptors 拦截器中添加headers 属性

    (vue.js)axios interceptors 拦截器中添加headers 属性:http://www.codes51.com/itwd/4282111.html 问题: (vue.js)axi ...

  4. WPF如何实现类似iPhone界面切换的效果(转载)

    WPF如何实现类似iPhone界面切换的效果 (version .1) 转自:http://blog.csdn.net/fallincloud/article/details/6968764 在论坛上 ...

  5. Andoird实现类似iphone AssistiveTouch的控件的demo

    类似Iphone Assistive Touch的控件的实现 网上也有些这方面的控件,不过貌似不怎么好用,或者是论坛需要积分下载,恰好自己在项目中有用到这种控件,就打算自己写一个,也成功实现了这种功能 ...

  6. JS实现为控件添加倒计时功能

    一.概述 在有些报表需求中,需要为控件添加倒计时功能,限制到某一个时间点后能进行一项操作或不能进行某项操作,比如查询,导出功能等等,又需要人性化地显示还有多少时间,即倒计时功能,比如下图中我们限制这个 ...

  7. iPhone 收藏网址[添加到书签] 和 [添加到主屏幕] 显示自定义图标,而不是网页截图

    iPhone 收藏网址[添加到书签] 和 [添加到主屏幕] 显示自定义图标,而不是网页截图: <!-- Safari浏览器[添加到书签] --> <link rel="sh ...

  8. 利用原生JS实现类似浏览器查找高亮功能(转载）

    利用原生JS实现类似浏览器查找高亮功能 在完成 Navify 时,增加一个类似浏览器ctrl+f查找并该高亮的功能,在此进行一点总结: 需求 在.content中有许多.box,需要在.box中找出搜 ...

  9. js实现类似页面广告一段时间自动打开一段时间自动关闭的功能

    js实现类似页面广告一段时间自动打开一段时间自动关闭的功能 一.总结 Window 对象的 open()方法:window.open('测试页面.html','news','height=300,wi ...

随机推荐

  1. VR的发展历程-VR全景智慧城市

    从1962年有第一台VR开始,到2014年Oculus被Facebook收购为止,VR经历了一个非常漫长的过程.从鲜为人知,到被广泛认识,逐渐走进我们生活.这就是VR形成的时代.在这个时代里,VR设备 ...

  2. 在JLabel上显示图片，并且图片自适应JLabel的大小

    本文转载地址:       http://blog.csdn.net/xiaoliangmeiny/article/details/7060250 在写<Core Java>上的示例代码时 ...

  3. 机器学习技法课之Aggregation模型

    Courses上台湾大学林轩田老师的机器学习技法课之Aggregation 模型学习笔记. 混合(blending) 本笔记是Course上台湾大学林轩田老师的<机器学习技法课>的学习笔记 ...

  4. Oracle listener服务启动后又停止的解决方案

    这是Oracle监听服务.忘了说我的版本是Oracle10g. 我装完Oracle数据库之后,然后用第三方工具plsql去连接,提示no listener,首先我反复检查tnsnames.ora配置文 ...

  5. 编写原生的Node.js模块

    导语:当Javascript的性能遭遇瓶颈,或者需要增强Javascript能力的时候,就需要依赖native模块来实现了. 应用场景 日常工作中,我们经常需要将原生的Node.js模块做为依赖并在项 ...

  6. SQL SERVER大话存储结构（4）_复合索引与包含索引

              索引这块从存储结构来分,有2大类,聚集索引和非聚集索引,而非聚集索引在堆表或者在聚集索引表都会对其 键值有所影响,这块可以详细查看本系列第二篇文章:SQL SERVER大话存储结构 ...

  7. #417 Div2 B

    #417 Div2 B 题意 给定一个01矩阵表示一幢楼,左右两侧是楼梯,中间是房间,1代表那个房间开灯,0代表关灯,现在某人从1层左端楼梯开始关掉所有灯,当移动某一层时,必须关掉当前层所有灯才能移动 ...

  8. Finding Similar Users-Euclidean Distance Score

    Purpose: Finding Similar Users Method:  Euclidean Distance Score ex2.py critics={'Lisa Rose': {'Lady ...

  9. 网络编程应用：基于TCP协议【实现文件上传】--练习

    要求: 基于TCP协议实现一个向服务器端上传文件的功能 客户端代码: package Homework2; import java.io.File; import java.io.FileInputS ...

  10. 基于redis实现tomcat8及以上版本的tomcat集群的session持久化实现（tomcat-redis-session-manager二次开发）

    前言: 本项目是基于jcoleman的tomcat-redis-session-manager二次开发版本 1.修改了小部分实现逻辑 2.去除对juni.jar包的依赖 3.去除无效代码和老版本tom ...