魔方在線秒表javascript版

更新時間：2009年12月13日 01:34:35 作者：

當前頁面需最大化，可以保存以下HTML代碼為htm文件即可空格觸發(fā)。

效果如下圖所以，我發(fā)現了，本人最短時間為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   class="2x2fgaz"   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>(松開時觸發(fā))、<b>停止</b>(按下時觸發(fā))、<b>復位</b>(同時記錄成績)，enjoy：）</font></p> <p><b><font size="2" color="#FF0000">注意：</font></b><font size="2">請先最大化窗口或拉伸窗口使右邊的滾動條不出現，否則空格鍵會讓窗口滾動。</font></p> <p><font size="2">下面的記錄系統(tǒng)是魔方吧的MAN大俠編寫。</font> 　</p> 　<div   class="wm3hxc7"   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   class="w7fd8zu"   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需再刷新一下頁面才能執(zhí)行]

您可能感興趣的文章:

javascript格式化日期時間函數
下面的js函數是格式化日期的，函數是一行寫的，所以大家可以直接負責應用就可以了
2008-06-06
JS學習之一個簡易的日歷控件
這種日歷控件實現起來不難，下面簡單分析下我的思路
2010-03-03
Date對象格式化函數代碼
Date對象格式化方法，需要的朋友可以參考下。
2010-07-07
同一頁面多個商品倒計時JS 基于面向對象的javascript
同一頁面多個商品倒計時JS 基于面向對象的javascript實現代碼，需要的朋友可以參考下
2012-02-02
原生js 秒表實現代碼
使用setTimeout遞歸處理。在這之中，有一個很重要的問題——延遲，這樣的做法和系統(tǒng)CPU資源有很大關系，而且函數的調用也要耗費時間，最終就導致計數的誤差越來越大
2012-07-07
JS getMonth()日期函數的值域是0-11
好久沒用JS寫代碼了，結果在計算日期時，出現了一個問題，困擾了我半天。最后終于搞清了問題的根源。
2010-02-02
input 日期選擇功能的javascript代碼
用來在輸入日期的輸入框直接選擇日期，不用手工填寫，一來不容易出錯哦，輸入規(guī)范。二來用戶體驗性好。
2009-12-12
JS日期控件My97DatePicker基本用法
這篇文章介紹了JS日期控件My97DatePicker的基本用法，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2021-12-12
js 3秒后跳轉頁面的實現代碼
這篇文章主要介紹了js 3秒后跳轉頁面的實現代碼,需要的朋友可以參考下
2014-03-03
一個簡單的日歷代碼 (For: FF1+ IE5+ Opr7+)測試
一個簡單的日歷代碼 (For: FF1+ IE5+ Opr7+)測試...
2007-03-03