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 相关文章推荐
javascript 面向对象继承
Nov 26 Javascript
JavaScript继承方式实例
Oct 29 Javascript
jQuery Mobile页面跳转后未加载外部JS原因分析及解决
Mar 18 Javascript
javascript跟随滚动效果插件代码(javascript Follow Plugin)
Aug 03 Javascript
js 模式窗口(模式对话框和非模式对话框)的使用介绍
Jul 17 Javascript
JavaScript中判断页面关闭、页面刷新的实现代码
Aug 27 Javascript
JavaScript实现页面跳转的方式汇总
May 16 Javascript
AngularJS bootstrap启动详解及实例代码
Sep 14 Javascript
Vue.js路由组件vue-router使用方法详解
Dec 02 Javascript
Vue2.0 实现歌手列表滚动及右侧快速入口功能
Aug 08 Javascript
Node.js net模块功能及事件监听用法分析
Jan 05 Javascript
基于jQuery拖拽事件的封装
Nov 29 jQuery
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
《PHP编程最快明白》第五讲:php目录、文件操作
2010/11/01 PHP
PHP中for与foreach的区别分析
2011/03/09 PHP
php dirname(__FILE__) 获取当前文件的绝对路径
2011/06/28 PHP
关于ob_get_contents(),ob_end_clean(),ob_start(),的具体用法详解
2013/06/24 PHP
thinkphp控制器调度使用示例
2014/02/24 PHP
php的闭包(Closure)匿名函数初探
2016/02/14 PHP
php微信公众平台开发(一) 配置接口
2016/12/06 PHP
PHP7扩展开发之基于函数方式使用lib库的方法详解
2018/01/15 PHP
laravel框架模型中非静态方法也能静态调用的原理分析
2019/11/23 PHP
javascript中的一些注意事项 更新中
2010/12/06 Javascript
Extjs中TabPane如何嵌套在其他网页中实现思路及代码
2013/01/27 Javascript
充分发挥Node.js程序性能的一些方法介绍
2015/06/23 Javascript
jquery获取文档高度和窗口高度汇总
2016/01/25 Javascript
正则表达式(语法篇推荐)
2016/06/24 Javascript
js中遍历对象的属性和值的方法
2016/07/27 Javascript
jQuery扩展实现text提示还能输入多少字节的方法
2016/11/28 Javascript
微信小程序自定义模态对话框实例详解
2017/08/16 Javascript
vue实现element-ui对话框可拖拽功能
2018/08/17 Javascript
超轻量级的js时间库miment使用解析
2019/08/02 Javascript
layui button 按钮弹出提示窗口,确定才进行的方法
2019/09/06 Javascript
如何实现js拖拽效果及原理解析
2020/05/08 Javascript
基于使用paramiko执行远程linux主机命令(详解)
2017/10/16 Python
JS设计模式之责任链模式实例详解
2018/02/03 Python
Python时间序列缺失值的处理方法(日期缺失填充)
2019/08/11 Python
Python3使用PySynth制作音乐的方法
2019/09/09 Python
Python高级特性之闭包与装饰器实例详解
2019/11/19 Python
Python定时任务APScheduler安装及使用解析
2020/08/07 Python
CSS Grid布局教程之网格单元格布局
2014/12/30 HTML / CSS
Html5页面在微信端的分享的实现方法
2018/08/30 HTML / CSS
Oracle中delete,truncate和drop的区别
2016/05/05 面试题
党的群众路线教育实践活动党员个人剖析材料
2014/10/08 职场文书
学习保证书怎么写
2015/02/26 职场文书
2015年工商所工作总结
2015/05/21 职场文书
2019事业单位个人工作总结范文
2019/08/26 职场文书
Java基础之线程锁相关知识总结
2021/06/30 Java/Android
PHP中多字节字符串操作实例详解
2021/08/23 PHP