<!DOCTYPE html><html lang=""><head> <mata charset = "utf-8" /><title>打地鼠</title><style> #tb{ background:url(beijing.jpg) no-repeat; } #fen{ font-weight:bold; font-size:60px; font-family:迷你简哈哈; } #fen1{ font-weight:bold; font-size:60px; font-family:迷你简哈哈; }</style><script> function kaishi(){ setTimeout("bh()",3000); sum=0; }// 实现地鼠出现的动作 function bh(){ sj=Math.floor(Math.random()*9); img1=document.getElementsByTagName("img"); img1[sj].src="dishu.gif";// 给地鼠图片添加单击事件和打击动作 img1[sj].setAttribute("onclick","daji()"); setTimeout("xs()",1000); }// 实现打击地鼠的动作，将地鼠图片更换为击中图片，并且去掉onclick事件，避免出现一只地鼠击中两次，加两次分数的情况 function daji(){ img1[sj].src="shang.gif"; img1[sj].removeAttribute("onclick");// 更换一次图片积分器加十分 sum+=10;// 改变积分器 document.getElementById("fen").innerHTML=sum/10; document.getElementById("fen1").innerHTML=sum; }// 一秒后没击中地鼠，地鼠消失动作 function xs(){ img1[sj].removeAttribute("onclick"); img1[sj].src="keng.gif"; setTimeout("bh()",1000); }</script></head>
<body ><center> <table id="tb"> <foction>打地鼠</foction> <tr> <td><img src="keng.gif"></td> <td><img src="keng.gif"></td> <td><img src="keng.gif"></td> </tr> <tr> <td><img src="keng.gif"></td> <td><img src="keng.gif"></td> <td><img src="keng.gif"></td> </tr> <tr> <td><img src="keng.gif"></td> <td><img src="keng.gif"></td> <td><img src="keng.gif"></td> </tr>
</table> <p id="fen">击中次数</p> <p id="fen1">分数</p></center></body></html>
原文地址：https://www.cnblogs.com/chaojiyingxiong/p/9309216.html
时间： 2024-10-11 11:49:06