homework.html
<!DOCTYPE> <html> <head> <meta charset="utf-8"> <title>打地鼠</title> <link rel="stylesheet" type="text/css" href="test.css" /> <script type="text/javascript" src="test.js"></script> </head> <body onload="create()"> <div id="title"> <h1>打地鼠</h1> <p>操作说明：用鼠标点击。当前分数是：<span id="score">0</span>分。剩余的时间：<span id="time">0</time>秒。</p> </div> <div id="list"> <form> 请选择难度 <select id="difficulty" onchange="changeDifficulty();"> <option value="hard">Hard</option> <option value="middle">Middle</option> <option value="easy">Easy</option> <option value="relax">Relax</option> </select> 请输入游戏时间：<input type="txt" id="WantTime" value="10"> </form> <button id="begin" type="button" onclick="begin()">开始</button> <button id="end" type="button" onclick="stop()">结束</button> </div> <div id="wrapper"> </div> </body> </html>test.js
var difficulty="hard";//难度 var time=500;//间隔事件 var endtime=new Number(10);//结束时间 function changeDifficulty() { difficulty=document.getElementById("difficulty").value; switch(difficulty) { case "hard": time=500;break; case "middle": time=800;break; case "easy": time=1200;break; case "relax": time=2000;break; } } function create() { var body=document.getElementById("wrapper");; //游戏时间更新 for(var i=0;i<10;i++) { var line=document.createElement("div"); line.id="line"+(i+1); body.appendChild(line); for(var j=1;j<=10;j++) { var note=document.createElement("div"); line.appendChild(note); note.id="note"+(i*10+j); //css note.style.height="30px"; note.style.width="30px"; note.style.borderRadius="100%"; note.style.margin="10px"; note.style.backgroundColor="#86cab1"; note.style.display="inline-block"; note.style.border="1px solid #4fbaeb" } } } var note;//当前随机节点 var timer;//用作关闭的引用 var score=0;//分数 var timing=new Number(0);//计时器 function AddScore() { score++; document.getElementById("score").innerHTML=score; init(); } function init() { note.removeEventListener("click",AddScore); note.style.backgroundColor="#86cab1"; } function begin() { //更新剩余时间 endtime=document.getElementById("WantTime").value; //随机数生成 var aim=Math.floor(100*Math.random())+1; note=document.getElementById("note"+aim); //样式 note.style.backgroundColor="#ea617f"; note.addEventListener("click",AddScore); //更新计数器 timing+=time/1000; var showtime=new Number(); showtime=endtime-timing; document.getElementById("time").innerHTML=showtime.toFixed(2); setTimeout("init()",time); timer=setTimeout("begin()",time); if(timing>endtime) { alert("游戏结束！你的得分是 "+score); stop(); } } function stop() { timing=0; score=0; note.style.backgroundColor="#86cab1"; clearTimeout(timer); document.getElementById("score").innerHTML=score; document.getElementById("time").innerHTML=timing; }test.css
#title { text-align: center; } #list { text-align: center; } select { margin-right: 30px; } #wrapper { text-align: center; }