js仿iphone秒表功能 計算平均數(shù)
更新時間：2017年01月11日 15:18:13 作者：0o曉月巜
這篇文章主要為大家詳細介紹了js仿iphone秒表功能，可以計算平均數(shù)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
js實現(xiàn)類似iphone的秒表，添加平均數(shù)功能
<!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 = [];
//循環(huán)指針
var changeTime = null;
var addnewValue = false;
var begin = false;
//label & 緩存已經(jīng)使用的時間
var countTime = null;
var totalTime = null;
beginChange = function(){
//設(shè)置標志位進行控制,避免多線程造成的變量問題
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){
//重設(shè)新的起始時間 暫停的時間點
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;
//多線程問題有時候會出現(xiàn)這情況
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);
//設(shè)置標志位進行控制,避免多線程造成的變量問題
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;">當前次數(shù)計時</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;">當前次數(shù)計時(秒)</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;">
添加的次數(shù)列表
<div id="result" >
</div>
</div>
<div style="width: 200px;position: absolute;left: 300px;top:253px;">
添加的次數(shù)列表(秒)
<div id="result-second" >
</div>
</div>
</body>
</html>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細介紹了swiper插件自定義切換箭頭按鈕，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-12-12
three.js 實現(xiàn)露珠滴落動畫效果的示例代碼
這篇文章主要介紹了three.js 實現(xiàn)露珠滴落動畫效果的示例代碼,非常不錯，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-03-03
如何使用JS獲取當前節(jié)點的兄弟/父/子節(jié)點
在日常的網(wǎng)頁開發(fā)中,我們會遇到獲取節(jié)點的問題,而js是寫網(wǎng)頁的最基礎(chǔ)的語言,也是最常用的,這篇文章主要給大家介紹了關(guān)于如何使用JS獲取當前節(jié)點的兄弟/父/子節(jié)點的相關(guān)資料,需要的朋友可以參考下2023-04-04
作用域永遠都是任何一門編程語言中的重中之重，因為它控制著變量與參數(shù)的可見性與生命周期。下面給大家介紹Javascript中的作用域及塊級作用域，需要的朋友參考下吧2017-12-12
ES6和CommonJS都有自己的一套處理模塊化代碼的措施，這篇文章主要介紹了ES6與CommonJS中的模塊處理的區(qū)別，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
在javascript中，帶小數(shù)的數(shù)據(jù)運算時總會出現(xiàn)好多位小數(shù).這是因為在javascript中浮點數(shù)的計算是以2進制計算的2014-05-05
js實現(xiàn)addClass,removeClass,hasClass的函數(shù)代碼
js實現(xiàn)addClass,removeClass,hasClass的函數(shù)代碼，需要的朋友可以參考下。2011-07-07
用js實現(xiàn)的生肖查詢的代碼，原理就是以1997年為參照值，取余運算，然后通過比較，獲取相應(yīng)出生年月的屬相。2011-02-02
這篇文章主要為大家詳細介紹了小程序?qū)崿F(xiàn)手寫板簽名，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
Javascript 靜態(tài)頁面實現(xiàn)隨機顯示廣告的辦法
最近在做私服發(fā)布站時，客戶要求實現(xiàn)廣告隨機排序，而且要求在html頁面實現(xiàn)，也就是說必須使用javascript來完成了。2010-11-11