魔方在线秒表javascript版
作者：bea
效果如下图所以，我发现了，本人最短时间为0.06秒，看大家的键盘与反应了。测试代码： <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>魔方小站秒表 Stopwatch for Rubik's Cube China</title> </head> <style> t
效果如下图所以，我发现了，本人最短时间为0.06秒，看大家的键盘与反应了。
测试代码：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>魔方小站秒表 Stopwatch for Rubik's Cube China</title>
</head>
<style>
td,input,div,th{font:9pt verdana}
p {line-height:60%}
</style>
<body onkeyup="begin(event)" onkeydown="stop(event)" onload=rndCube()>
<script type=text/javascript>
var Max=25;
var bestAve;
var then;
var nowDec;
var nowBest;
var nowWorst;
var runing=0;
var timeint;
var i=0;
var totalsec;
var sec;
var min;
var subsec;
var secdis;
var mindis;
var subsecdis;
var datas=new Array()
var nowSecondes;
function getAv(st,ed)
{
for(i=st;i<=ed;i++)
{
datas.join(" ")
}
}
function stop(evt)
{
if (runing==1 && evt.keyCode==32)
clearTimeout(timeint);
}
function toSeconds(dec)
{ var Ms,sec
var tmpDec=dec.split(":")
if(tmpDec[0]*10/10>0)
{
Ms=tmpDec[0]*60
return(Ms+tmpDec[1]*10/10)
}else{
return(tmpDec[1]*10/10)
}
}
function begin(evt)
{
if (evt.keyCode==32)
{
if (runing==0){
then=new Date();
runing=1;
show();
}
else if (runing==1)
{
runing=2;
}
else
{
ShowDatas(toSeconds(nowSeconds))
document.getElementById("watch").innerHTML="00:00.00";
runing=0;
}
}
}
var a=0;
function ShowDatas(dec)
{
if(dec==0){return false}
var newDec=get2(dec)
datas.push(newDec) //添加记录
SortDatas() //排序得到最大最小值
ShowDetails()
spanBest.innerHTML="<b style=color:red>"+sec2minsec(nowBest)+"</b>"
spanWorst.innerHTML="<b>"+sec2minsec(nowWorst)+"</b>"
var tmp1=0;
for(i=0;i<datas.length;i++)
{
tmp1+=datas[i]
}
spanAv.innerHTML="<b>"+sec2minsec(get2(tmp1/datas.length))+"</b>"
}
var bestAve=new Array();
function sec2minsec(n)
{ if (n>60)
{
var tmpmins=Math.floor(n/60);
var tmpseconds=get2(n-tmpmins*60);
var tmpstring
if (tmpseconds<10)
{ tmpstring=tmpmins+":0"+tmpseconds;
}
else tmpstring=tmpmins+":"+tmpseconds;
return tmpstring
}
else return n;
}
function ShowDetails()
{
if(datas.length>12){a=datas.length -12}
var tmpTd="<table cellspacing=1 bgcolor=olive><tr align=center bgcolor=EEEEEE><th width=50>1<th width=50>2<th width=50>3<th width=50>4<th width=50>"
tmpTd+="5<td width=50>6<th width=50>7<th width=50>8<th width=50>9<th width=50>10<th width=50>11<th width=50>12</tr><tr bgcolor=white>";
for(i=a;i<(12+a);i++)
{
bestAve[i-a]=datas[i];//将当前12局成绩存入数组
tmpTd+="<td align=center>"
if(datas[i]==undefined){tmpTd+="-"}
else
{
if(datas[i]==nowBest || datas[i]==nowWorst)
{
tmpTd+=sec2minsec(datas[i])+"*"
}else
{
tmpTd+=sec2minsec(datas[i]);
}
}
tmpTd+="</td>"
}
tmpTd+="</tr></table>"
//alert(datas.join(","));
div1.innerHTML="";
div1.innerHTML=tmpTd;
rndCube();
document.focus();
}
function show()
{ var now=new Date();
diff=now.getTime()-then.getTime();
totalsec=Math.floor(diff/1000);
sec=totalsec%60;
if(sec<10)
{
secdis="0"+sec;
}
else
{
secdis=sec;
}
min=(totalsec-sec)/60;
if (min<10)
{
mindis="0"+min;
}
else
{
mindis=min;
}
subsec=Math.floor((diff%1000)/10);
if (subsec<10)
{
subsecdis="0"+subsec;
}
else
{
subsecdis=subsec;
}
nowSeconds=mindis+":"+secdis+"."+subsecdis;
document.getElementById("watch").innerHTML=nowSeconds;
timeint=setTimeout("show()",50)
}
function get2(dec) //取两位小数点
{
return Math.round(dec*100)/100
}
function SortDatas()//最大最小值
{
var tmpArr=new Array()
for(i=0;i<datas.length;i++)
{
tmpArr[i]=datas[i]
}
tmpArr.sort(function(a,b){ return a-b;})
nowBest=tmpArr[0]
nowWorst=tmpArr[tmpArr.length-1]
ShowBestAv()
}
function mycls()
{
clearTimeout(timeint);
nowSeconds="00:00:00";
runing=0;
datas=new Array();
ShowDatas(0);
ShowDetails();
document.getElementById("watch").innerHTML="00:00.00";
btn1.focus();
}
function ShowBestAv()
{
var av=0;
bestAve.sort();
if(bestAve[11]==undefined){return false}
for(i=1;i<bestAve.length-1;i++)
{
av+=bestAve[i];
}
spanBestAv.innerHTML=get2(av/10);
//alert(bestAve)
}
</script>
<script>
function cancel()
{ clearTimeout(timeint);
nowSeconds="00:00:00";
runing=0;
btn1.focus();
rndCube();
document.getElementById("watch").innerHTML="00:00.00";
}
function rndCube()
{
var move="";
var rndMove=new Array("R","L","F","B","U","D")
var add=0;
var tmpRnd;
var arr=new Array();
while(true)
{
if(add>=Max){break}
//tmpRnd=Math.round(Math.random()*5)
if(tmpRnd==arr[arr.length -1])
{ tmpRnd=Math.floor(Math.random()*6);
}
else
{ arr.push(tmpRnd)
add++
}
}
for(i=0;i<arr.length;i++)
{
var tmp=Math.floor(Math.random()*5)
if(tmp==4)
{ move+=rndMove[arr[i]]+"2";}
else if(tmp==2 || tmp==3)
{ move+=rndMove[arr[i]]+"'";}
else
{ move+=rndMove[arr[i]];}
move+=" ";
}
rndDiv.innerHTML=move;
}
</script>
<center>
<div id="watch" style="filter:shadraw(x=1,y=1,color=black);position:relative;width: 359px; height: 80px ; font-size:48pt; font-family:Arial; font-weight:bold; color:navy; text-align:center" >00:00.00</div>
<p>
<font size="2">用<font color="#000080"><b>空格</b></font>键<b>开始</b>(松开时触发)、<b>停止</b>(按下时触发)、<b>复位</b>(同时记录成绩)，enjoy：）</font></p>
<p><b><font size="2" color="#FF0000">注意：</font></b><font size="2">请先最大化窗口或拉伸窗口使右边的滚动条不出现，否则空格键会让窗口滚动。</font></p>
<p><font size="2">下面的记录系统是魔方吧的MAN大侠编写。</font>
</p>
<div id=rndDiv style="font:12pt Arial;font-weight:bold"></div>
<input type=button value="清除所有记录" onclick=mycls();><input type=button value="不记录此次成绩" type=button onclick=cancel();div1.focus()>
<input type=button value="" style="width:0px;height:0px" onclick="document.focus" id=btn1>
<div id=div1>
<table cellspacing=1 bgcolor=olive>
<tr bgcolor=#EEEEEE align=center>
<td width=50>1
<td width=50>2
<td width=50>3
<td width=50>4
<td width=50>5
<td width=50>6
<td width=50>7
<td width=50>8
<td width=50>9
<td width=50>10
<td width=50>11
<td width=50>12
</tr>
<tr bgcolor=white align=center>
<td width=50>-
<td width=50>-
<td width=50>-
<td width=50>-
<td width=50>-
<td width=50>-
<td width=50>-
<td width=50>-
<td width=50>-
<td width=50>-
<td width=50>-
<td width=50>-
</tr>
</table>
</div>
</center>
<table align=center>
<tr><td>最快:</td><td><span id=spanBest></span></td></tr>
<tr><td>最慢:</td><td><span id=spanWorst></span></td></tr>
<tr><td>平均:</td><td><span id=spanAv></span></td></tr>
<tr><td>最好平均:</td><td><span id=spanBestAv></span></td></tr>
</table>
</body>
</html>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行]
有用 | 无用
测试代码：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>魔方小站秒表 Stopwatch for Rubik's Cube China</title>
</head>
<style>
td,input,div,th{font:9pt verdana}
p {line-height:60%}
</style>
<body onkeyup="begin(event)" onkeydown="stop(event)" onload=rndCube()>
<script type=text/javascript>
var Max=25;
var bestAve;
var then;
var nowDec;
var nowBest;
var nowWorst;
var runing=0;
var timeint;
var i=0;
var totalsec;
var sec;
var min;
var subsec;
var secdis;
var mindis;
var subsecdis;
var datas=new Array()
var nowSecondes;
function getAv(st,ed)
{
for(i=st;i<=ed;i++)
{
datas.join(" ")
}
}
function stop(evt)
{
if (runing==1 && evt.keyCode==32)
clearTimeout(timeint);
}
function toSeconds(dec)
{ var Ms,sec
var tmpDec=dec.split(":")
if(tmpDec[0]*10/10>0)
{
Ms=tmpDec[0]*60
return(Ms+tmpDec[1]*10/10)
}else{
return(tmpDec[1]*10/10)
}
}
function begin(evt)
{
if (evt.keyCode==32)
{
if (runing==0){
then=new Date();
runing=1;
show();
}
else if (runing==1)
{
runing=2;
}
else
{
ShowDatas(toSeconds(nowSeconds))
document.getElementById("watch").innerHTML="00:00.00";
runing=0;
}
}
}
var a=0;
function ShowDatas(dec)
{
if(dec==0){return false}
var newDec=get2(dec)
datas.push(newDec) //添加记录
SortDatas() //排序得到最大最小值
ShowDetails()
spanBest.innerHTML="<b style=color:red>"+sec2minsec(nowBest)+"</b>"
spanWorst.innerHTML="<b>"+sec2minsec(nowWorst)+"</b>"
var tmp1=0;
for(i=0;i<datas.length;i++)
{
tmp1+=datas[i]
}
spanAv.innerHTML="<b>"+sec2minsec(get2(tmp1/datas.length))+"</b>"
}
var bestAve=new Array();
function sec2minsec(n)
{ if (n>60)
{
var tmpmins=Math.floor(n/60);
var tmpseconds=get2(n-tmpmins*60);
var tmpstring
if (tmpseconds<10)
{ tmpstring=tmpmins+":0"+tmpseconds;
}
else tmpstring=tmpmins+":"+tmpseconds;
return tmpstring
}
else return n;
}
function ShowDetails()
{
if(datas.length>12){a=datas.length -12}
var tmpTd="<table cellspacing=1 bgcolor=olive><tr align=center bgcolor=EEEEEE><th width=50>1<th width=50>2<th width=50>3<th width=50>4<th width=50>"
tmpTd+="5<td width=50>6<th width=50>7<th width=50>8<th width=50>9<th width=50>10<th width=50>11<th width=50>12</tr><tr bgcolor=white>";
for(i=a;i<(12+a);i++)
{
bestAve[i-a]=datas[i];//将当前12局成绩存入数组
tmpTd+="<td align=center>"
if(datas[i]==undefined){tmpTd+="-"}
else
{
if(datas[i]==nowBest || datas[i]==nowWorst)
{
tmpTd+=sec2minsec(datas[i])+"*"
}else
{
tmpTd+=sec2minsec(datas[i]);
}
}
tmpTd+="</td>"
}
tmpTd+="</tr></table>"
//alert(datas.join(","));
div1.innerHTML="";
div1.innerHTML=tmpTd;
rndCube();
document.focus();
}
function show()
{ var now=new Date();
diff=now.getTime()-then.getTime();
totalsec=Math.floor(diff/1000);
sec=totalsec%60;
if(sec<10)
{
secdis="0"+sec;
}
else
{
secdis=sec;
}
min=(totalsec-sec)/60;
if (min<10)
{
mindis="0"+min;
}
else
{
mindis=min;
}
subsec=Math.floor((diff%1000)/10);
if (subsec<10)
{
subsecdis="0"+subsec;
}
else
{
subsecdis=subsec;
}
nowSeconds=mindis+":"+secdis+"."+subsecdis;
document.getElementById("watch").innerHTML=nowSeconds;
timeint=setTimeout("show()",50)
}
function get2(dec) //取两位小数点
{
return Math.round(dec*100)/100
}
function SortDatas()//最大最小值
{
var tmpArr=new Array()
for(i=0;i<datas.length;i++)
{
tmpArr[i]=datas[i]
}
tmpArr.sort(function(a,b){ return a-b;})
nowBest=tmpArr[0]
nowWorst=tmpArr[tmpArr.length-1]
ShowBestAv()
}
function mycls()
{
clearTimeout(timeint);
nowSeconds="00:00:00";
runing=0;
datas=new Array();
ShowDatas(0);
ShowDetails();
document.getElementById("watch").innerHTML="00:00.00";
btn1.focus();
}
function ShowBestAv()
{
var av=0;
bestAve.sort();
if(bestAve[11]==undefined){return false}
for(i=1;i<bestAve.length-1;i++)
{
av+=bestAve[i];
}
spanBestAv.innerHTML=get2(av/10);
//alert(bestAve)
}
</script>
<script>
function cancel()
{ clearTimeout(timeint);
nowSeconds="00:00:00";
runing=0;
btn1.focus();
rndCube();
document.getElementById("watch").innerHTML="00:00.00";
}
function rndCube()
{
var move="";
var rndMove=new Array("R","L","F","B","U","D")
var add=0;
var tmpRnd;
var arr=new Array();
while(true)
{
if(add>=Max){break}
//tmpRnd=Math.round(Math.random()*5)
if(tmpRnd==arr[arr.length -1])
{ tmpRnd=Math.floor(Math.random()*6);
}
else
{ arr.push(tmpRnd)
add++
}
}
for(i=0;i<arr.length;i++)
{
var tmp=Math.floor(Math.random()*5)
if(tmp==4)
{ move+=rndMove[arr[i]]+"2";}
else if(tmp==2 || tmp==3)
{ move+=rndMove[arr[i]]+"'";}
else
{ move+=rndMove[arr[i]];}
move+=" ";
}
rndDiv.innerHTML=move;
}
</script>
<center>
<div id="watch" style="filter:shadraw(x=1,y=1,color=black);position:relative;width: 359px; height: 80px ; font-size:48pt; font-family:Arial; font-weight:bold; color:navy; text-align:center" >00:00.00</div>
<p>
<font size="2">用<font color="#000080"><b>空格</b></font>键<b>开始</b>(松开时触发)、<b>停止</b>(按下时触发)、<b>复位</b>(同时记录成绩)，enjoy：）</font></p>
<p><b><font size="2" color="#FF0000">注意：</font></b><font size="2">请先最大化窗口或拉伸窗口使右边的滚动条不出现，否则空格键会让窗口滚动。</font></p>
<p><font size="2">下面的记录系统是魔方吧的MAN大侠编写。</font>
</p>
<div id=rndDiv style="font:12pt Arial;font-weight:bold"></div>
<input type=button value="清除所有记录" onclick=mycls();><input type=button value="不记录此次成绩" type=button onclick=cancel();div1.focus()>
<input type=button value="" style="width:0px;height:0px" onclick="document.focus" id=btn1>
<div id=div1>
<table cellspacing=1 bgcolor=olive>
<tr bgcolor=#EEEEEE align=center>
<td width=50>1
<td width=50>2
<td width=50>3
<td width=50>4
<td width=50>5
<td width=50>6
<td width=50>7
<td width=50>8
<td width=50>9
<td width=50>10
<td width=50>11
<td width=50>12
</tr>
<tr bgcolor=white align=center>
<td width=50>-
<td width=50>-
<td width=50>-
<td width=50>-
<td width=50>-
<td width=50>-
<td width=50>-
<td width=50>-
<td width=50>-
<td width=50>-
<td width=50>-
<td width=50>-
</tr>
</table>
</div>
</center>
<table align=center>
<tr><td>最快:</td><td><span id=spanBest></span></td></tr>
<tr><td>最慢:</td><td><span id=spanWorst></span></td></tr>
<tr><td>平均:</td><td><span id=spanAv></span></td></tr>
<tr><td>最好平均:</td><td><span id=spanBestAv></span></td></tr>
</table>
</body>
</html>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行]
有用 | 无用
猜你喜欢
您可能感兴趣的文章:
- IE不支持option的display样式，只能使用remove和add
- 讨论javascript(一)工厂方式 js面象对象的定义方法
- 查询绑定数据岛的表格中的文本并修改显示方式的js代码
- jquery自动完成插件(autocomplete)应用之PHP版
- jQuery Attributes(属性)的使用(一、属性篇)
- Javascript attachEvent传递参数的办法
- firefox下对ajax的onreadystatechange的支持情况分析
- javascript document.execCommand() 常用解析
- JavaScript 创建随机数和随机图片
- JQuery Tips(3) 关于$()包装集内元素的改变
- JQuery Tips(2) 关于$()包装集你不知道的
- 最简单的javascript对象实例代码
- 读取table内容的javascript代码
- js 页面传参数时 参数值含特殊字符的问题
- input 日期选择功能的javascript代码
- JQuery下关于$.Ready()的分析
- javascript下搜索子字符串的的实现代码()
- javascript与asp.net(c#)互相调用方法
- JavaScript 字符串与数组转换函数[不用split与join]