对上次的“打地鼠“进行了调整-CSDN博客

本文链接：https://blog.csdn.net/weixin_62670199/article/details/126821264

上次的打地鼠只有一个地鼠,太枯燥了,这次增加了点难度嘿嘿嘿.老规矩,先上代码.

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
   </head>
   <script type="text/javascript">

           function goimg(){
           var htmltab = "";
           var imgs = new Array("img/20171013151955664.jpg","img/20171013152015812.jpg")
           /*拼接行标签*/
           for(var i=0;i<3;i++){
               htmltab+="<tr>"
               /*拼接列标签*/
               for(var u = 0 ; u<3 ; u++){
                   //随机数,小数转换成整数
                   var num = Math.floor(Math.random()*imgs.length);
                   htmltab+="<td><img οnclick='bz(this)' src="+imgs[num]+" width='100px' height='100px'/></td>"
               }

               htmltab+="</tr>"
           }
           //将拼接好的html标签插入到表格中
           document.getElementById("tb").innerHTML=htmltab;
           //定时执行(模拟点击按钮,切换图片)
           setTimeout("goimg()",1000)
       }


       function bz(obj){
           //获取分数
           var tNum = document.getElementById("t").value
           //获取当前点击图片标签上的图片属性
           var img = obj.getAttribute("src")
           if(img=="img/20171013152015812.jpg"){
               obj.setAttribute("src","img/20171013152030215.jpg")
               //修改分数
               document.getElementById("t").value=(parseInt(tNum)+1)
           }else{
               //点错扣分
               //修改分数
               document.getElementById("t").value=(parseInt(tNum)-1)
           }
       }

   </script>
   <body>
       <div id="" align="center">
           <input type="text" id="t" value="0"/>
           <input type="button" value="开始" οnclick="goimg()" />
           <table border="1px" id="tb" width="300px" height="300px"></table>
       </div>
   </body>
</html>