脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js仿iphone秒表

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

 更新时间：2017年01月11日 15:18:13   作者：0o晓月巜  
这篇文章主要为大家详细介绍了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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • swiper插件自定义切换箭头按钮

    swiper插件自定义切换箭头按钮

    这篇文章主要为大家详细介绍了swiper插件自定义切换箭头按钮，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-12-12
  • three.js 实现露珠滴落动画效果的示例代码

    three.js 实现露珠滴落动画效果的示例代码

    这篇文章主要介绍了three.js 实现露珠滴落动画效果的示例代码,非常不错，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2021-03-03
  • 如何使用JS获取当前节点的兄弟/父/子节点

    如何使用JS获取当前节点的兄弟/父/子节点

    在日常的网页开发中,我们会遇到获取节点的问题,而js是写网页的最基础的语言,也是最常用的,这篇文章主要给大家介绍了关于如何使用JS获取当前节点的兄弟/父/子节点的相关资料,需要的朋友可以参考下
    2023-04-04
  • Javascript中的作用域及块级作用域

    Javascript中的作用域及块级作用域

    作用域永远都是任何一门编程语言中的重中之重，因为它控制着变量与参数的可见性与生命周期。下面给大家介绍Javascript中的作用域及块级作用域，需要的朋友参考下吧
    2017-12-12
  • ES6与CommonJS中的模块处理的区别

    ES6与CommonJS中的模块处理的区别

    ES6和CommonJS都有自己的一套处理模块化代码的措施，这篇文章主要介绍了ES6与CommonJS中的模块处理的区别，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • js加减乘除丢失精度问题解决方法

    js加减乘除丢失精度问题解决方法

    在javascript中，带小数的数据运算时总会出现好多位小数.这是因为在javascript中浮点数的计算是以2进制计算的
    2014-05-05
  • js实现addClass,removeClass,hasClass的函数代码

    js实现addClass,removeClass,hasClass的函数代码

    js实现addClass,removeClass,hasClass的函数代码，需要的朋友可以参考下。
    2011-07-07
  • 用js实现的生肖查询的代码

    用js实现的生肖查询的代码

    用js实现的生肖查询的代码，原理就是以1997年为参照值，取余运算，然后通过比较，获取相应出生年月的属相。
    2011-02-02
  • 小程序实现手写板签名

    小程序实现手写板签名

    这篇文章主要为大家详细介绍了小程序实现手写板签名，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-07-07
  • Javascript 静态页面实现随机显示广告的办法

    Javascript 静态页面实现随机显示广告的办法

    最近在做私服发布站时，客户要求实现广告随机排序，而且要求在html页面实现，也就是说必须使用javascript来完成了。
    2010-11-11

最新评论