爱站程序员基地<!DOCTYPE html><html lang=\"zh\"><head><meta charset=\"UTF-8\"><title>Curtain-HomeWork</title><style>.container {width: 500px;min-height: 100px;margin: 20px auto;background-color: lightgray;}.ta {margin: 0 auto;padding: 10px 0;}.ta td {width: 100px;height: 100px;border: 1px solid black;padding: 0;vertical-align: bottom;}.m1 {width: 80px;height: 0px;margin: 0 auto;transition: all 0.25s ease;border-radius: 40px 40px 0px 0px;background: url(\"./sources2/mouse.jpg\") no-repeat -5px 0;background-size: 88px;}.show {height: 90px !important;}</style><script type=\"text/javascript\" src=\"./jquery/jquery-3.3.1.js\"></script><script type=\"text/javascript\">let num=0;function myshow() {let number = Math.round(Math.random()*9);$(\".m1\").eq(number).toggleClass(\"show\");}function time() {alert(\"游戏时间到了哦!\");location.reload()}function change1(){// console.log($(this));let num=0;//点击事件是点击后.click括号中第一个function的对象就是其本身，可以用this代替// jQuery对象--$(this)$(\".m1\").click(function () {if($(this).is(\'.show\')) {console.log($(this));$(this).removeClass(\"show\");num++;console.log(num);$(\"#d10\").text(num);}})}//单独使用id选择器找到对应的每一个地鼠对象进行操作，//可使用上面的点击事件，更为方便// function change1(){// $(\"#d1\").removeClass(\"show\");// num++;// $(\"#d10\").text(num);// }// function change2(){// $(\"#d2\").removeClass(\"show\");// num++;// $(\"#d10\").text(num);// }// function change3(){// $(\"#d3\").removeClass(\"show\");// num++;// $(\"#d10\").text(num);// }// function change4(){// $(\"#d4\").removeClass(\"show\");// num++;// $(\"#d10\").text(num);// }// function change5(){// $(\"#d5\").removeClass(\"show\");// num++;// $(\"#d10\").text(num);// }// function change6(){// $(\"#d6\").removeClass(\"show\");// num++;// $(\"#d10\").text(num);// }// function change7(){// $(\"#d7\").removeClass(\"show\");// num++;// $(\"#d10\").text(num);// }// function change8(){// $(\"#d8\").removeClass(\"show\");// num++;// $(\"#d10\").text(num);// }// function change9(){// $(\"#d9\").removeClass(\"show\");// num++;// $(\"#d10\").text(num);// }function newGame() {location.reload();}</script></head><body><button onclick=\"setInterval(myshow,500)\" onmousedown=\"setInterval(time,6000)\">开始游戏</button><button onclick=\"newGame()\" >重新开始游戏</button><div style=\"font-size: 30px;\" ><span>打到的个数:</span><span id=\"d10\" style=\"color: red;\" >0</span></div><hr><div class=\"container\"><table class=\"ta\" ><tbody><tr><td><div id=\"d1\" class=\"m1\" onmousedown=\"change1()\"></div></td><td><div id=\"d2\" class=\"m1\" onmousedown=\"change1()\"></div></td><td><div id=\"d3\" class=\"m1\" onmousedown=\"change1()\"></div></td></tr><tr><td><div id=\"d4\" class=\"m1\" onmousedown=\"change1()\"></div></td><td><div id=\"d5\" class=\"m1\" onmousedown=\"change1()\"></div></td><td><div id=\"d6\" class=\"m1\" onmousedown=\"change1()\"></div></td></tr><tr><td><div id=\"d7\" class=\"m1\" onmousedown=\"change1()\"></div></td><td><div id=\"d8\" class=\"m1\" onmousedown=\"change1()\"></div></td><td><div id=\"d9\" class=\"m1\" onmousedown=\"change1()\"></div></td></tr></tbody></table></div></body></html>
地鼠图片：
