js仿iphone秒表功能 计算平均数


Posted in Javascript onJanuary 11, 2017

js实现类似iphone的秒表,添加平均数功能

js仿iphone秒表功能 计算平均数

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
  <title>stop watch</title>
  <!--by 0o晓月メ http://www.cnblogs.com/final-elysion/p/6066358.html -->
  <script type="text/javascript">
    //起始计时时间
    var totalStartTime = null;
    var countStartTime = null;
    
    //暂停时的时间
    var stopCountTime = 0;
    var stopTotalTime = 0;

    //保存的计次时间列表
    var countList = [];

    //循环指针
    var changeTime = null;
    var addnewValue = false;
    var begin = false;
    //label & 缓存已经使用的时间
    var countTime = null;
    var totalTime = null;

    beginChange = function(){
      //设置标志位进行控制,避免多线程造成的变量问题
      begin = true;     
      changeTime = setInterval(changeStopWatch,10);
      
      document.getElementById('begin').disabled = true;
      document.getElementById('stop').disabled = false;
      document.getElementById('commit').disabled = false;
      document.getElementById('reset').disabled = true;
    }

    /**
     * 计时器核心方法
     */
    changeStopWatch = function(){
      if(begin){
        totalStartTime = new Date();
        countStartTime = totalStartTime;
        begin = false;
      }else if(addnewValue){
        //重设新的起始时间 暂停的时间点
        countStartTime = new Date();
        stopCountTime = 0;
        addnewValue = false;
      }

      var now = new Date();
      var tempTotal = (now.getTime() - totalStartTime.getTime())/1000 + stopTotalTime;
      var tempCount = (now.getTime() - countStartTime.getTime())/1000 + stopCountTime;
      tempTotal = Math.floor(tempTotal * 100) / 100;
      tempCount = Math.floor(tempCount * 100) / 100;
      //多线程问题有时候会出现这情况
      if(tempTotal < 0 || tempCount < 0){
        console.log('bug')
        return ;
      }
      setTotalTime(tempTotal);
      setCountTime(tempCount);
    }

    stopChange = function(){
      clearInterval(changeTime);

      stopCountTime = countTime;
      stopTotalTime = totalTime;
      
      document.getElementById('begin').disabled = false;
      document.getElementById('stop').disabled = true;
      document.getElementById('commit').disabled = true;
      document.getElementById('reset').disabled = false;
    }

    addNewValue = function (){
      //缓存添加的时间
      var newValue = countTime;
      countList.push(newValue);

      //设置标志位进行控制,避免多线程造成的变量问题
      addnewValue = true;
      
      //刷新页面
      setNewValue(newValue);
      changeAverage();
    }

    changeAverage = function(){
      var total = 0,
        i = 0;
      for(;i<countList.length; i++){
        total = total +countList[i];
      }
      var result = Math.floor(total/i * 100) / 100;
      document.getElementById('average').innerText = secondToTime(result);
      document.getElementById('average-second').innerText = result;
    }

    resetStopWatch = function(){
      totalStartTime = 0;
      countStartTime = 0; 
      stopCountTime = 0;
      stopTotalTime = 0;
      countList = [];
      changeTime = null;
  
      addnewValue = false;
      begin = false;
  
      setCountTime(0);
      setTotalTime(0);

      document.getElementById('result').innerHTML = "";
      document.getElementById('average').innerText = "00:00:00.00";
      document.getElementById('result-second').innerHTML = "";
      document.getElementById('average-second').innerText = "0";
    }

    function secondToTime(time) {
      var result = "";
      if (null != time && "" != time && time > 0) {
        //hour
        if (time >= 60 * 60) {
          result = parseInt(time / 3600);
          if(result< 10){
            result = "0" + result + ":";
          }else{
            result = result + ":"
          }
        }else{
          result = "00:"
        }

        //min
        if (time >= 60) {
          var tempMin = parseInt((time - parseInt(time / 3600) * 3600 )/ 60) ;
          if(tempMin < 10){
            tempMin = "0" + tempMin + ":";
          }else{
            tempMin = tempMin + ":"
          }
          result = result + tempMin;
        }else{
          result = result + "00:";
        }

        //second
        
        var timeStr = time + "";
        var tempSecond = parseInt(time%60);
        
        if(tempSecond < 10){
          tempSecond = "0" + tempSecond;
        }
        if(timeStr.indexOf(".") >= 0){
          tempSecond = tempSecond + timeStr.substring(timeStr.indexOf("."),timeStr.length);
        }
        result = result + tempSecond;
        
      }else{
        result = "00:00:00.00";
      }
      return result;
    }

    getCountTime = function(){
      return document.getElementById('count-Time');
    }

    setCountTime = function(value){
      countTime = value;
      document.getElementById('count-second-Time').innerText = value;
      document.getElementById('count-Time').innerText = secondToTime(value);
    }

    getTotalTime = function(){
      return document.getElementById('total-Time');
    }

    setTotalTime = function(value){
      totalTime = value;

      document.getElementById('total-Time').innerText = secondToTime(value);
      document.getElementById('total-second-Time').innerText = value;
      
    }

    setNewValue = function(value){
      var newNode = document.createElement("div");
      newNode.innerHTML = secondToTime(value);
      
      var oldNode = document.getElementById('result');
      oldNode.appendChild(newNode);

     
      
      var newNode2 = document.createElement("div");
      newNode2.innerHTML = value;
      
      var oldNode2 = document.getElementById('result-second');
      oldNode2.appendChild(newNode2);
    }

    

  </script>
 </head>

 <body >
  <div style="width: 430px;border-width: 2px;border-style: solid;padding: 10px 10px 10px 10px;">
    <input type="button" id ="begin" value="启动" onclick="beginChange()"/>
    <input type="button" id = "stop" value="停止" disabled="true" onclick="stopChange()"/>
    <input type="button" id = "commit" value="计次" disabled="true" onclick="addNewValue()"/>
    <input type="button" id = "reset" value="重置" disabled="true" onclick="resetStopWatch()"/>
    <br />

    <div style="width:200px;margin-top:10px;" >
      <div style="padding-top:20px;">当前次数计时</div>
      <div id="count-Time" >
        00:00:00.00
      </div>
      <div style="padding-top:20px;">总时间计时</div>
      <div id="total-Time" >
        00:00:00.00
      </div>
      <div style="padding-top:20px;">
        <div>平均值</div>
        <div id ="average" >00:00:00.00</div> 
      </div> 
    </div>
 
    <div style="width: 200px;position: absolute;left: 300px;top: 50px;" >
      <div style="padding-top:20px;">当前次数计时(秒)</div>
      <div id="count-second-Time">
        0
      </div>
      
      <div style="padding-top:20px;">总时间计时(秒)</div>
      <div id="total-second-Time">
        0
      </div>
      <div style="padding-top:20px;">
        <div>平均值(秒)</div>
        <div id ="average-second" >0</div> 
      </div>
    </div>
  </div>

  <div style="width:200px;margin-top:21px;">
    添加的次数列表
    <div id="result" >
      
    </div>
  </div>
  
  
  <div style="width: 200px;position: absolute;left: 300px;top:253px;">
    添加的次数列表(秒)
    <div id="result-second" >
      
    </div>
  </div>
  
 </body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery tools之tooltip
Jul 25 Javascript
JS中的prototype与面向对象的实例讲解
May 22 Javascript
JS保存、读取、换行、转Json报错处理方法
Jun 14 Javascript
JS随机生成不重复数据的实例方法
Jul 17 Javascript
javascript右下角弹层及自动隐藏(自己编写)
Nov 20 Javascript
jQuery中add()方法用法实例
Jan 08 Javascript
jQuery学习笔记——jqGrid的使用记录(实现分页、搜索功能)
Nov 09 Javascript
利用jQuery实现一个简单的表格上下翻页效果
Mar 14 Javascript
Mobile Web开发基础之四--处理手机设备的横竖屏问题
Aug 11 Javascript
详解使用React进行组件库开发
Feb 06 Javascript
js实现百度登录窗口拖拽效果
Mar 19 Javascript
vue实现PC端分辨率适配操作
Aug 03 Javascript
jQuery实现限制文本框的输入长度
Jan 11 #Javascript
angularjs 实现带查找筛选功能的select下拉框实例
Jan 11 #Javascript
微信小程序 轮播图swiper详解及实例(源码下载)
Jan 11 #Javascript
Angularjs中使用layDate日期控件示例
Jan 11 #Javascript
web打印小结
Jan 11 #Javascript
微信小程序 常见问题总结(4058,40013)及解决办法
Jan 11 #Javascript
jQuery插件JWPlayer视频播放器用法实例分析
Jan 11 #Javascript
You might like
可快速识别放射性物质-国外大神教你diy一个开放式辐射探测器
2020/03/12 无线电
第三节--定义一个类
2006/11/16 PHP
php smarty模版引擎中的缓存应用
2009/12/02 PHP
用PHP将网址字符串转换成超链接(网址或email)
2010/05/25 PHP
PHP MYSQL实现登陆和模糊查询两大功能
2016/02/05 PHP
PHP实现移除数组中为空或为某值元素的方法
2017/01/07 PHP
JavaScript call apply使用 JavaScript对象的方法绑定到DOM事件后this指向问题
2011/09/28 Javascript
验证码在IE中不刷新而谷歌等浏览器正常的解决方案
2014/03/18 Javascript
node.js中的console用法总结
2014/12/15 Javascript
JavaScript将Web页面内容导出到Word及Excel的方法
2015/02/13 Javascript
分享10个原生JavaScript技巧
2015/04/20 Javascript
jQuery实现仿美橙互联两级导航菜单效果完整实例
2015/09/17 Javascript
connection reset by peer问题总结及解决方案
2016/10/21 Javascript
BootStrap 图标icon符号图标glyphicons不正常显示的快速解决办法
2016/12/08 Javascript
动态加载JavaScript文件的3种方式
2018/05/05 Javascript
Angularjs中的$apply及优化使用详解
2018/07/02 Javascript
VUEX采坑之路之获取不到$store的解决方法
2019/11/08 Javascript
vscode调试node.js的实现方法
2020/03/22 Javascript
JS写滑稽笑脸运动效果
2020/05/28 Javascript
[03:41]DOTA2上海特锦赛小组赛第三日recap精彩回顾
2016/02/28 DOTA
python使用cStringIO实现临时内存文件访问的方法
2015/03/26 Python
Python学习小技巧之列表项的排序
2017/05/20 Python
Python上下文管理器和with块详解
2017/09/09 Python
python 查找文件名包含指定字符串的方法
2018/06/05 Python
python pandas 对时间序列文件处理的实例
2018/06/22 Python
详解python数据结构和算法
2019/04/18 Python
Python一键安装全部依赖包的方法
2019/08/12 Python
Numpy与Pytorch 矩阵操作方式
2019/12/27 Python
Django实现从数据库中获取到的数据转换为dict
2020/03/27 Python
求职简历中自我评价
2014/01/28 职场文书
导师推荐信范文
2014/05/09 职场文书
高三毕业典礼演讲稿
2014/05/13 职场文书
房产销售独家委托书范本
2014/10/01 职场文书
2015年社区服务活动总结
2015/03/25 职场文书
Pygame Rect区域位置的使用(图文)
2021/11/17 Python
nginx 配置缓存
2022/05/11 Servers