魔方在线秒表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 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格式化日期时间函数
下面的js函数是格式化日期的，函数是一行写的，所以大家可以直接负责应用就可以了
2008-06-06
JS学习之一个简易的日历控件
这种日历控件实现起来不难，下面简单分析下我的思路
2010-03-03
Date对象格式化函数代码
Date对象格式化方法，需要的朋友可以参考下。
2010-07-07
同一页面多个商品倒计时JS 基于面向对象的javascript
同一页面多个商品倒计时JS 基于面向对象的javascript实现代码，需要的朋友可以参考下
2012-02-02
原生js 秒表实现代码
使用setTimeout递归处理。在这之中，有一个很重要的问题——延迟，这样的做法和系统CPU资源有很大关系，而且函数的调用也要耗费时间，最终就导致计数的误差越来越大
2012-07-07
JS getMonth()日期函数的值域是0-11
好久没用JS写代码了，结果在计算日期时，出现了一个问题，困扰了我半天。最后终于搞清了问题的根源。
2010-02-02
input 日期选择功能的javascript代码
用来在输入日期的输入框直接选择日期，不用手工填写，一来不容易出错哦，输入规范。二来用户体验性好。
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

魔方在线秒表javascript版

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具