首页 > 网络编程 > javascript > 网页特效 > 时间日期 > 秒表 javascript

魔方在线秒表javascript版

2009-12-13 01:34:35 作者：

当前页面需最大化，可以保存以下HTML代码为htm文件即可空格触发。

效果如下图所以，我发现了，本人最短时间为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 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需刷新才能执行]

魔方在线秒表javascript版

您可能感兴趣的文章: