<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css"> <!-- td{100px;height:100px; } --> </style> <title>打地鼠</title> <script language="javascript"> var td = new Array(); var playing = false; var score = 0; var beat = 0; var timeLength = 10; function GameOver()//游戏结束函数 { timeStop(); playing = false; clearMouse(); alert("end！\nyour score："+score); } function timeShow() { document.form1.remtime.value = timeLength; if(timeLength == 0) { GameOver(); return; } else { timeLength = timeLength-1; timeID = setTimeout("timeShow()",1000);//函数的调用，每隔一段时间调用一次 } } function timeStop() { clearInterval(t); } function show() { if(playing) { var current = Math.floor(Math.random()*12);//随机产生老鼠图片 document.getElementById("td["+current+"]").innerHTML = '<img src="02.gif">'; setTimeout("document.getElementById('td["+current+"]').innerHTML=''",1000);//每隔一段时间随机调用函数 } } function clearMouse() { for(var i=0;i<=11;i++) { document.getElementById("td["+i+"]").innerHTML=""; } } function hit(id) { if(playing==false) { alert("亲，你错啦！哈哈！"); return; } else { beat +=1; if(document.getElementById("td["+id+"]").innerHTML!="") { score += 1; document.form1.score.value = score; document.getElementById("td["+id+"]").innerHTML=""; } else { score += -1; document.form1.score.value = score; } } } function GameStart()//游戏开始函数 { playing=true; t=setInterval("show()",600);//老鼠停留时间 document.form1.score.value = score; timeShow(); } </script> </head> <body onload="alert(" Event demo loaded");" onunload="alert("Leaving demo");"> <hl align="center">HTML 事见绑定</hl> <form action="#" method="get" onreset="alert('Form reset');" onsubmit="alert('Form submit');return false;"> <center> <div id="Layer1"> <marquee direction="left"> <table width="50" border="0" cellspacing="0" cellpadding="0" background="#000000"> <tr> <td><img src="02.gif" width="50"/></td> <td><img src="02.gif" width="50"/></td> <td><img src="02.gif" width="50"/></td> </tr> </table> </marquee> </div> <table border="1"> <tr> <td id="td[0]" onclick="hit(0)"height="100" width="100" bgcolor="#006600"></td> <td id="td[1]" onclick="hit(1)"height="100" width="100" bgcolor="#006666"></td> <td id="td[2]" onclick="hit(2)"height="100" width="100" bgcolor="#006666"></td> <td id="td[3]" onclick="hit(3)"height="100" width="100" bgcolor="#006600"></td> </tr> <tr> <td id="td[4]" onclick="hit(4)"height="100" width="100" bgcolor="#006666"></td> <td id="td[5]" onclick="hit(5)"height="100" width="100" bgcolor="#006600"></td> <td id="td[6]" onclick="hit(6)"height="100" width="100" bgcolor="#006600"></td> <td id="td[7]" onclick="hit(7)"height="100" width="100" bgcolor="#006666"></td> </tr> <tr> <td id="td[8]" onclick="hit(8)"height="100" width="100" bgcolor="#006600"></td> <td id="td[9]" onclick="hit(9)"height="100" width="100" bgcolor="#006666"></td> <td id="td[10]" onclick="hit(10)"height="100" width="100" bgcolor="#006666"></td> <td id="td[11]" onclick="hit(11)"height="100" width="100" bgcolor="#006600"></td> </tr> </table> <input type="button" value="start" onclick="GameStart()"> <input type="button" value="end!" name="button" onclick="GameOver()"/> <form name="form1"> <td>score</td> <input type="text" name="score" size="10"> <td>Countdown</td> <input type="text" name="remtime" size="10"> </form> </center> </form> </body> </html>