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实现图片左右间隔滚动特效(可自动播放)
May 08 Javascript
HTML5之lang属性与dir属性的详解
Jun 19 Javascript
js 走马灯简单实例
Nov 21 Javascript
基于jQuery的图片不完全按比例自动缩小
Jul 11 Javascript
从JQuery源码分析JavaScript函数的apply方法与call方法
Sep 25 Javascript
使用javascript实现判断当前浏览器
Apr 14 Javascript
JS获取下拉框显示值和判断单选按钮的方法
Jul 09 Javascript
js+css实现有立体感的按钮式文字竖排菜单效果
Sep 01 Javascript
Bootstrap轮播加上css3动画,炫酷到底!
Dec 22 Javascript
从零开始最小实现react服务器渲染详解
Jan 26 Javascript
React 源码中的依赖注入方法
Nov 07 Javascript
jquery制作的移动端购物车效果完整示例
Feb 24 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
Win9x/ME下Apache+PHP安装配置
2006/10/09 PHP
用PHP编写和读取XML的几种方式
2013/01/12 PHP
php截取中文字符串不乱码的方法
2013/12/25 PHP
深入剖析浏览器退出之后php还会继续执行么
2016/05/17 PHP
php利用header函数下载各种文件
2016/08/24 PHP
PHP载入图像imagecreatefrom_gif_jpeg_png系列函数用法分析
2016/11/14 PHP
JavaScript中令你抓狂的魔术变量
2006/11/30 Javascript
初学Javascript的一些总结
2008/11/03 Javascript
Jquery 插件开发笔记整理
2011/01/17 Javascript
精通Javascript系列之数值计算
2011/06/07 Javascript
javascript 另一种图片滚动切换效果思路
2012/04/20 Javascript
jQuery实现三级菜单的代码
2016/05/09 Javascript
node实现定时发送邮件的示例代码
2017/08/26 Javascript
easyui下拉框动态级联加载的示例代码
2017/11/29 Javascript
Node.js readline模块与util模块的使用
2018/03/01 Javascript
Vue项目引发的「过滤器」使用教程
2019/03/12 Javascript
vue 集成jTopo 处理方法
2019/08/07 Javascript
Python保存MongoDB上的文件到本地的方法
2016/03/16 Python
简单了解OpenCV是个什么东西
2017/11/10 Python
Pycharm配置远程调试的方法步骤
2018/12/17 Python
python实现AES加密与解密
2019/03/28 Python
解决在pycharm运行代码,调用CMD窗口的命令运行显示乱码问题
2019/08/23 Python
Python中的引用和拷贝实例解析
2019/11/14 Python
Pytorch的mean和std调查实例
2020/01/02 Python
python爬虫开发之PyQuery模块详细使用方法与实例全解
2020/03/09 Python
用html5绘制折线图的实例代码
2016/03/25 HTML / CSS
翻新二手苹果产品的网络领导者:Mac of all Trades
2017/12/19 全球购物
成教毕业生自我鉴定
2013/10/23 职场文书
实习教师个人的自我评价
2013/11/08 职场文书
少先队入队活动方案
2014/02/08 职场文书
六一节目主持词
2014/04/01 职场文书
高校师德师风自我剖析材料
2014/09/29 职场文书
2014年初一班主任工作总结
2014/11/08 职场文书
2015年监理个人工作总结
2015/05/23 职场文书
领导欢送会主持词
2015/07/06 职场文书
如何利用 CSS Overview 面板重构优化你的网站
2021/10/24 HTML / CSS