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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
一个iOS上的秒表小应用的实现方法分享
模仿实现一下ios系统应用时钟里的秒表程序,就是这个应用: 主要实现的功能: 1.由start/stop键实现计时 2.有reset/lap键实现复位和计次 需要思考的点: 1.时间的表示方法(有很多种思路) 2.计次数据的倒序排列,即计次1的数据在最底端,依次向上为计次2,计次3的时间数据 我的实现: ARC省去了我们自行管理内存的大部分事情,写惯了c++于是舒服了很多 复制代码 代码如下: - (IBAction) startOrstop:(UIButton *)sender {
-
Android自定义Chronometer实现短信验证码秒表倒计时功能
本文实例为大家分享了Chronometer实现倒计时功能,Android提供了实现按照秒计时的API,供大家参考,具体内容如下 一.自定义ChronometerView 继续自TextView 主要原理:先设置一个基准倒计时时间mBaseSeconds,内置handler 每隔1s发送一个空消息,mRemainSeconds--,同时刷新界面视图,回调给外部调用者,只到为零.外部调用者可通过start()/pause()/stop()来控制计时器的工作状态. 可以app中发送短信验证码的场景为例
-
Android实现的秒表计时器示例
本文实例讲述了Android实现的秒表计时器.分享给大家供大家参考,具体如下: package com.liu.time; import java.util.Timer; import java.util.TimerTask; import android.app.Activity; import android.app.AlertDialog; import android.content.Context; import android.content.DialogInterface; imp
-
魔方在线秒表javascript版
效果如下图所以,我发现了,本人最短时间为0.06秒,看大家的键盘与反应了.测试代码: 魔方小站秒表 Stopwatch for Rubik's Cube China td,input,div,th{font:9pt verdana} p {line-height:60%} var Max=25; var bestAve; var then; var nowDec; var nowBest; var nowWorst; var runing=0; var timeint; var i=0; var
-
js判断手机端(Android手机还是iPhone手机)
网上常用的代码 /** * [isMobile 判断平台] * @param test: 0:iPhone 1:Android */ function ismobile(test){ var u = navigator.userAgent, app = navigator.appVersion; if(/AppleWebKit.*Mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alca
-
原生js 秒表实现代码
html代码: 复制代码 代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <meta charset="gb2312"> <head> <style type="text/css"> #container { margin:0 auto; margin-top:10%; width:200px; } #t
-
javascript设计简单的秒表计时器
本文实例讲述了javascript设计简单的秒表计时器的实现代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: <html> <head> <title> New Document </title> </head> <body> <form action="somepage.asp"> <input type="text" value="0&q
-
BOM系列第三篇之定时器应用(时钟、倒计时、秒表和闹钟)
时钟 最简单的时钟制作办法是通过正则表达式的exec()方法,将时间对象的字符串中的时间部分截取出来,使用定时器刷新即可 <div id="myDiv"></div> <script> myDiv.innerHTML = /\d\d:\d\d:\d\d/.exec(new Date().toString())[0]; setInterval(function(){ myDiv.innerHTML = /\d\d:\d\d:\d\d/.exec(new
-
javascript判断iphone/android手机横竖屏模式的函数
查了不少资料,最后结论如下: 复制代码 代码如下: function orientationChange(){ switch(window.orientation) { case 0: // Portrait case 180: // Upside-down Portrait // Javascript to setup Portrait view break; case -90: // Landscape: turned 90 degrees counter-clockwise case 90
-
js实现简单的秒表走动的时钟特效
本文实例介绍了javascript实现简单的秒表走动的时钟特效.分享给大家供大家参考.具体如下: 运行效果图如下: 实现代码: <html> <head> <script type="text/javascript"> function startTime() { var today=new Date() var h=today.getHours() var m=today.getMinutes() var s=today.getSeconds(