魔方在线秒表javascript版

2019-11-21 00:54:48

字体：大中小

来源：转载

供稿：网友

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

上一篇：JavaScript 字符串与数组转换函数[不用split与join]

下一篇：jQuery 行背景颜色的交替显示(隔行变色)实现代码