鼠标点击游戏-反应速度测试

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<HTML>
<HEAD>
<TITLE>鼠标点击游戏</TITLE>
<STYLE type=text/css>
BODY {
MARGIN-TOP: 0px; FONT-SIZE: 9pt; MARGIN-LEFT: 0px; MARGIN-RIGHT: 0px; FONT-FAMILY: "宋体"
}
A {
FONT-WEIGHT: 400; FONT-SIZE: 9pt; COLOR: black; TEXT-DECORATION: none
}
A:hover {
FONT-WEIGHT: 400; FONT-SIZE: 9pt; COLOR: red; TEXT-DECORATION: underline
}
A:active {
FONT: 9pt "宋体"; CURSOR: hand; COLOR: #ff0033
}
.STYLE1 {
	font-family: "微软雅黑";
	font-size: 40px;
	color: #990066;
}
.STYLE2 {
	font-family: "华文行楷";
	font-weight: bold;
	font-size: 30px;
	color: #99CC66;
}
</STYLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
</HEAD>
<BODY bgColor=#fef4d9 onload=javascript:animate();>
<CENTER>
  <span class="STYLE1">鼠标点击游戏</span>
</CENTER><BR>
<CENTER>
<TABLE borderColor=#99CCFF border=5 borderlight="green">
  <TBODY>
  <TR>
    <TD align=left>
<SCRIPT language=javascript>
var index;
var objBox;
var box;
var iTimesAnimate;
var blnGameStarted;
var wrongClicks;
var TotalDisplay;
index=10;
blnGameStarted = false;
wrongClicks=0;
TotalDisplay = 0;
function changeColorOn(abc)
{
	abc.color="white";
	abc.backgroundColor="black"
}
function changeColorOff(abc)
{
	abc.color="black";
	abc.backgroundColor="white"
}
function animate()
{
	document.buzzy.btnStart.disabled = true;
	if(index < 102)
	{
		document.all[index-1].style.backgroundColor="white";
		document.all[index].style.backgroundColor="yellowgreen";
		setTimeout('animate()',75);
		index = index + 1;
	}
	else
	{
		setTimeout('document.all[101].style.backgroundColor="white"',75);
		initialize();
	}
}
function checkClick(objBox1)
{
	if(blnGameStarted)
	{
		objBox = objBox1;
		if(objBox.backgroundColor == "yellowgreen")
		{
			document.buzzy.txtScore.value = eval(document.buzzy.txtScore.value) + 1;
		}
		else
		{
			wrongClicks = wrongClicks + 1;
			objBox.backgroundColor = "red";
			setTimeout('objBox.backgroundColor = "white"',200);
		}
	}
}
function getRandom()
{
	return (Math.round(Math.random()*(97-9)))+9;
}
function highlightBox()
{
	if(blnGameStarted)
	{
		box = getRandom();
		document.all[box].style.backgroundColor = "yellowgreen";
		TotalDisplay = TotalDisplay + 1;
		setTimeout('document.all[box].style.backgroundColor = "white"',700);
		setTimeout('highlightBox()',800);
	}
}
function startTime()
{
	if(eval(document.buzzy.txtTime.value)  != 0)
	{
		document.buzzy.txtTime.value = eval(document.buzzy.txtTime.value) - 1;
		setTimeout('startTime()',1000);
	}else{
		alert('Time Up!! You Scored ' + document.buzzy.txtScore.value + " out of " + TotalDisplay + "\n\n No. of drunkard%$# clicks: " + wrongClicks);
		document.buzzy.btnStart.disabled = false;
		blnGameStarted = false;
	}
}
function initialize()
{
	blnGameStarted = confirm('游戏现在开始，你准备好了吗？？？')
	if(blnGameStarted)
	{
		document.buzzy.txtTime.value = 60;
		document.buzzy.txtScore.value = 0;
		setTimeout('startTime()',10);
		highlightBox();
	}else
		document.buzzy.btnStart.disabled = false;
}
</SCRIPT>
      <TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
        <TBODY>
        <TR>
          <TD vAlign=center align=middle>
            <TABLE 
            style="BORDER-LEFT-COLOR: blue; BORDER-BOTTOM-COLOR: blue; BORDER-TOP-COLOR: blue; BORDER-RIGHT-COLOR: blue; boder-style: outset" 
            cellSpacing=0 cellPadding=8 width=400 border=4>
              <TBODY>
              <TR><INPUT type=hidden name=9></FONT> 
                <TD onclick=javascript:checkClick(this.style); 
                  name="10">&nbsp; </TD>
                <TD onclick=javascript:checkClick(this.style); 
                  name="11">&nbsp; </TD>
                <TD onclick=javascript:checkClick(this.style); 
                  name="12">&nbsp; </TD>
                <TD onclick=javascript:checkClick(this.style); 
                  name="13">&nbsp; </TD>
                <TD onclick=javascript:checkClick(this.style); 
                  name="14">&nbsp; </TD>
                <TD onclick=javascript:checkClick(this.style); 
                  name="15">&nbsp; </TD>
                <TD onclick=javascript:checkClick(this.style); 
                  name="16">&nbsp; </TD>
                <TD onclick=javascript:checkClick(this.style); 
                  name="17">&nbsp; </TD>
                <TD onclick=javascript:checkClick(this.style); 
                  name="18">&nbsp; </TD>
                <TD onclick=javascript:checkClick(this.style); 
                  name="19">&nbsp; </TD></TR>
              <TR>
                <TD onclick=javascript:checkClick(this.style); 
                  name="20">&nbsp; </TD>
                <TD onclick=javascript:checkClick(this.style); 
                  name="21">&nbsp; </TD>
                <TD onclick=javascript:checkClick(this.style); 
                  name="22">&nbsp; </TD>
                <TD onclick=javascript:checkClick(this.style); 
                  name="23">&nbsp; </TD>
                <TD onclick=javascript:checkClick(this.style); 
                  name="24">&nbsp; </TD>
                <TD onclick=javascript:checkClick(this.style); 
                  name="25">&nbsp; </TD>
                <TD onclick=javascript:checkClick(this.style); 
                  name="26">&nbsp; </TD>
                <TD onclick=javascript:checkClick(this.style); 
                  name="27">&nbsp; </TD>
                <TD onclick=javascript:checkClick(this.style); 
                  name="28">&nbsp; </TD>
                <TD onclick=javascript:checkClick(this.style); 
                  name="29">&nbsp; </TD></TR>
              <TR>
                <TD onclick=javascript:checkClick(this.style); 
                  name="30">&nbsp; </TD>
                <TD onclick=javascript:checkClick(this.style); 
                  name="31">&nbsp; </TD>
                <TD onclick=javascript:checkClick(this.style); 
                  name="32">&nbsp; </TD>
                <TD onclick=javascript:checkClick(this.style); 
                  name="33">&nbsp; </TD>
                <TD onclick=javascript:checkClick(this.style); 
                  name="34">&nbsp; </TD>
                <TD onclick=javascript:checkClick(this.style); 
                  name="35">&nbsp; </TD>
                <TD onclick=javascript:checkClick(this.style); 
                  name="36">&nbsp; </TD>
                <TD onclick=javascript:checkClick(this.style); 
                  name="37">&nbsp; </TD>
                <TD onclick=javascript:checkClick(this.style); 
                  name="38">&nbsp; </TD>
                <TD onclick=javascript:checkClick(this.style); 
                  name="39">&nbsp; </TD></TR>
              <TR>
                <TD onclick=javascript:checkClick(this.style); 
                  name="40">&nbsp; </TD>
                <TD onclick=javascript:checkClick(this.style); 
                  name="41">&nbsp; </TD>
                <TD onclick=javascript:checkClick(this.style); 
                  name="42">&nbsp; </TD>
                <TD onclick=javascript:checkClick(this.style); 
                  name="43">&nbsp; </TD>
                <TD onclick=javascript:checkClick(this.style); 
                  name="44">&nbsp; </TD>
                <TD onclick=javascript:checkClick(this.style); 
                  name="45">&nbsp; </TD>
                <TD onclick=javascript:checkClick(this.style); 
                  name="46">&nbsp; </TD>
                <TD onclick=javascript:checkClick(this.style); 
                  name="47">&nbsp; </TD>
                <TD onclick=javascript:checkClick(this.style); 
                  name="48">&nbsp; </TD>
                <TD onclick=javascript:checkClick(this.style); 
                  name="49">&nbsp; </TD></TR>
              <TR>
                <TD onclick=javascript:checkClick(this.style); 
                  name="50">&nbsp; </TD>
                <TD onclick=javascript:checkClick(this.style); 
                  name="51">&nbsp; </TD>
                <TD onclick=javascript:checkClick(this.style); 
                  name="52">&nbsp; </TD>
                <TD onclick=javascript:checkClick(this.style); 
                  name="53">&nbsp; </TD>
                <TD onclick=javascript:checkClick(this.style); 
                  name="54">&nbsp; </TD>
                <TD onclick=javascript:checkClick(this.style); 
                  name="55">&nbsp; </TD>
                <TD onclick=javascript:checkClick(this.style); 
                  name="56">&nbsp; </TD>
                <TD onclick=javascript:checkClick(this.style); 
                  name="57">&nbsp; </TD>
                <TD onclick=javascript:checkClick(this.style); 
                  name="58">&nbsp; </TD>
                <TD onclick=javascript:checkClick(this.style); 
                  name="59">&nbsp; </TD></TR>
              <TR>
                <TD onclick=javascript:checkClick(this.style); 
                  name="60">&nbsp; </TD>
                <TD onclick=javascript:checkClick(this.style); 
                  name="61">&nbsp; </TD>
                <TD onclick=javascript:checkClick(this.style); 
                  name="62">&nbsp; </TD>
                <TD onclick=javascript:checkClick(this.style); 
                  name="63">&nbsp; </TD>
                <TD onclick=javascript:checkClick(this.style); 
                  name="64">&nbsp; </TD>
                <TD onclick=javascript:checkClick(this.style); 
                  name="65">&nbsp; </TD>
                <TD onclick=javascript:checkClick(this.style); 
                  name="66">&nbsp; </TD>
                <TD onclick=javascript:checkClick(this.style); 
                  name="67">&nbsp; </TD>
                <TD onclick=javascript:checkClick(this.style); 
                  name="68">&nbsp; </TD>
                <TD onclick=javascript:checkClick(this.style); 
                  name="69">&nbsp; </TD></TR>
              <TR>
                <TD onclick=javascript:checkClick(this.style); 
                  name="70">&nbsp; </TD>
                <TD onclick=javascript:checkClick(this.style); 
                  name="71">&nbsp; </TD>
                <TD onclick=javascript:checkClick(this.style); 
                  name="72">&nbsp; </TD>
                <TD onclick=javascript:checkClick(this.style); 
                  name="73">&nbsp; </TD>
                <TD onclick=javascript:checkClick(this.style); 
                  name="74">&nbsp; </TD>
                <TD onclick=javascript:checkClick(this.style); 
                  name="75">&nbsp; </TD>
                <TD onclick=javascript:checkClick(this.style); 
                  name="76">&nbsp; </TD>
                <TD onclick=javascript:checkClick(this.style); 
                  name="77">&nbsp; </TD>
                <TD onclick=javascript:checkClick(this.style); 
                  name="78">&nbsp; </TD>
                <TD onclick=javascript:checkClick(this.style); 
                  name="79">&nbsp; </TD></TR>
              <TR>
                <TD onclick=javascript:checkClick(this.style); 
                  name="80">&nbsp; </TD>
                <TD onclick=javascript:checkClick(this.style); 
                  name="81">&nbsp; </TD>
                <TD onclick=javascript:checkClick(this.style); 
                  name="82">&nbsp; </TD>
                <TD onclick=javascript:checkClick(this.style); 
                  name="83">&nbsp; </TD>
                <TD onclick=javascript:checkClick(this.style); 
                  name="84">&nbsp; </TD>
                <TD onclick=javascript:checkClick(this.style); 
                  name="85">&nbsp; </TD>
                <TD onclick=javascript:checkClick(this.style); 
                  name="86">&nbsp; </TD>
                <TD onclick=javascript:checkClick(this.style); 
                  name="87">&nbsp; </TD>
                <TD onclick=javascript:checkClick(this.style); 
                  name="88">&nbsp; </TD>
                <TD onclick=javascript:checkClick(this.style);name="89">&nbsp; </TD></TR></TBODY></TABLE></TD></TR>
        <TR>
          <TD align=middle>
            <FORM name=buzzy>
            <TABLE cellSpacing=0 cellPadding=8 width=400 border=0>
              <TBODY>
              <TR>
                <TD>&nbsp; </TD></TR>
              <TR>
                <TD align=left><B>Score:</B><INPUT 
                  style="FONT-WEIGHT: bold; WIDTH: 75px" readOnly value=0 
                  name=txtScore char="10"> </TD>
                <TD align=middle><INPUT style="WIDTH: 75px" onClick="javascipt:document.buzzy.btnStart.disabled = true;initialize();" type=button value=Start name=btnStart></TD>
  <TD align=right><B>Time:</B><INPUT style="FONT-WEIGHT: bold; WIDTH: 75px" readOnly value=60 name=txtTime char="10">  </TD></TR></TBODY></TABLE></FORM></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
</CENTER>
</BODY>
</HTML>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

鼠标点击游戏-反应速度测试

分类

鼠标特效

描述

一个测试反应速度的小游戏，鼠标点击游戏，开始游戏后，用鼠标点击方格上随机出现的小方块，时间非常快，可锻炼反应能力，用户界面写的挺不错，游戏代码简单，希望大家喜欢。