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

那么接下来就为大家详细讲解一下“js仿iphone秒表功能 计算平均数”的完整攻略，具体步骤分为以下几个部分：

一、制作计时器功能

1.在HTML中创建一个div用来存放计时器所显示的时间;

<div id="clock"></div>

2.在JS中定义计时器的初始值为0，定义一个变量来存储计时器的状态;

 var timeSet =0, //计时器初始值 
     intervalId = 0;//计时器状态变量 

3.定义一个函数来实现计时器的功能，该函数以每毫秒递增，将该值转换为时、分、秒、毫秒的形式;

 function getClock() { 
     var hours = Math.floor(timeSet / (60 * 60 * 1000)); 
     var minutes = Math.floor((timeSet % (60 * 60 * 1000)) / (60 * 1000)); 
     var seconds = Math.floor((timeSet % (60 * 1000)) / 1000); 
     var milliSeconds = Math.floor(timeSet % 1000); 

     //将时、分、秒、毫秒时间格式化为固定格式 
     var hoursFormatted = ("0" + hours).slice(-2); 
     var minutesFormatted = ("0" + minutes).slice(-2); 
     var secondsFormatted = ("0" + seconds).slice(-2); 
     var milliSecondsFormatted = ("00" + milliSeconds).slice(-3); 

     //将时间格式化为“00:00:00.000”格式，并显示在前端页面 
     document.getElementById("clock").innerHTML = hoursFormatted + ":" + minutesFormatted + ":" + secondsFormatted + "." + milliSecondsFormatted; 
     timeSet += 10; //每隔10毫秒计时器递增一次 
 } 

4.定义事件处理函数用来开始、停止、清零计时器功能;

 function startTime() { 
     if (intervalId === 0) { //如果计时器状态变量为0，则计时器处于初始状态 
         intervalId = setInterval(getClock, 10);//每隔10毫秒调用一次函数来递增计时器的值 
     } 
 } 
 function stopTime() { 
     clearInterval(intervalId);//停止计时器，清除计时器ID 
     intervalId = 0;//将计时器状态变量设置为0 
 } 
 function resetTime() { 
     stopTime(); //先将计时器停止 
     timeSet = 0;//将计时器初始值设置为0 
     getClock();//重新开始计时器 
 } 

二、实现计算平均数功能

1.在HTML中新增一个文本框，用来输入要计算平均数的数字；

<input type="text" id="numbers" placeholder="请输入数字，用逗号分隔" /> 

2.定义一个函数用来将文本框中的数字转换为数组格式；

function splitNumbers() { 
    var input = document.getElementById("numbers").value; //获取文本框中的数字 
    var numbersArray = input.split(",");//根据","将数字转换为数组格式 
    return numbersArray; 
} 

3.在JS中定义一个事件处理函数，用来调用让splitNumbers函数来将文本框中的数字转换为数组格式，并调用数组的reduce方法来计算平均数；

function calculateAverage() { 
    var numbersArray = splitNumbers();//调用splitNumbers函数将文本框中的数字转换为数组格式 
    var sum = numbersArray.reduce(function(total, num) { //使用数组的reduce方法将数组中的数字相加 
        return (total + parseInt(num)); 
    }, 0); 
    var average = sum / numbersArray.length;//计算平均数 
    alert("平均数为：" + average); //将计算结果弹出显示 
} 

4.在HTML中新增一个按钮，调用事件处理函数来计算平均数；

<button onclick="calculateAverage()">计算平均数</button>

以上就是“js仿iphone秒表功能 计算平均数”的完整攻略，可以根据这个攻略来实现对应的功能。