打地鼠
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <style type="text/css"> .pic{ width: 409px; height: 504px; border: 1px solid green; margin: auto; } .pic div { width: 65px; height: 65px; border: 1px solid black; padding: 2px; margin: 15px; float: left; background: url(img/00.jpg); } .butt{ width: 100px; height: 30px; } .view{ width: 300px; height: 100px; border:1px solid red; margin: auto; } .pic div img{ display: none; } .ddiv{ width: 200px; height: 154px; border: 1px solid #6495ED; margin: auto; text-align: center; position: absolute; background-color: #6495ED; top: 20%; left: 50%; margin-left:-100px ; display: none; } </style> <body> <div class="pic" id="pic"> <!-- <div style=display:none class='nei' id='pico' value='1'><img src='img/01.jpg'></div> --> </div><div class="view"> <span id='fen'>积分:0分</span><br> <span id='hour'>计时:0秒</span><br> <input id="start" type="button" class="butt" value="开始" onclick="star()"/> <input id="eend" type="button" class="butt" value="结束" onclick="end()"/></div> <div id='jie' class="ddiv"> 游戏结束 </div> </body> <script type="text/javascript"> /* 默认定义所有图片不显示 */ let cc=0; let mytime=0; var c=0; var aa=0; for(let i=0;i<20;i++){//使用循环自动添加元素 document.getElementById('pic').innerHTML+='<div><img id="img'+i+'" src="img/01.jpg" onclick="Mouse(this)"/></div>'; } function star(){//定义star按钮 用户使用 并且只要用户点击后 就立马禁用防止多次点击 被'玩坏' document.getElementById('jie').style.display="none"; document.getElementById('start').disabled=true; c=0;/* 使用定时函数 创建匿名函数 定义时间 每毫秒刷新 并且每秒赋值给计时器 使用toFixed函数截取小数后两位*/ mytime=setInterval(function(){ c+=0.1; document.getElementById('hour').innerHTML="计时:"+(c.toFixed(2))+"秒"; /* 判断如果时间大于20秒游戏自动结束 调用clearInterval函数进行关闭各个定时函数*/ if(c>20){ aa=0; c=0; clearInterval(mytime) clearInterval(cc) document.getElementById('jie').style.display="block"; document.getElementById('eend').disabled=true; document.getElementById('start').disabled=false; }; },110); /* 使用定时函数 + 匿名函数 定义随机数生成 然后自定义拼接 id='img'+随机到的数 然后拼接给document.getElementById()将拼接的id传入 然后根据传入的值获取的值对其赋予显示图片的style方法 然后定义定时函数(只执行一次的) 给予时间值 让其过段时间就自动关闭 */ cc=setInterval(function(){ let num=parseInt(Math.random()*20); let id='img'+num; let img=document.getElementById(id); img.style.display="block"; setTimeout(function(){ img.style.display="none"; img.src="img/01.jpg"; },2000); },1000); }; /* 创建关闭定时函数的函数 用户点击释放 */ function end(){ aa=0; c=0; clearInterval(mytime); clearInterval(cc); document.getElementById('jie').style.display="block"; if(document.getElementById('start').disabled==true){ document.getElementById('start').disabled=false;}; for(let i=0;i<20;i++){//使用循环自动添加元素 var dde='img'+i; console.log(dde); document.getElementById(dde).style.display="none"; }}; /* 创建用户点击图片加分效果 使用特殊点记录 如果为此值 则定义的数值记录加分 并且放置用户多次点击 将 图片更改 判断用户如果获得分数等于10分则结束游戏 */ var abc=0; function Mouse(obj){ var sr=obj.src; //http://127.0.0.1:8848/javaee/img/01.jpg abc=sr.substr(sr.lastIndexOf('01'),2); console.log(abc); if(abc==01){ aa+=1; document.getElementById('fen').innerHTML="积分:"+(aa)+"分"; obj.src="img/02.jpg"; } if(aa==10){ aa=0; c=0; clearInterval(mytime) clearInterval(cc) document.getElementById('jie').style.display="block"; document.getElementById('eend').disabled=true; document.getElementById('start').disabled=false; }; } </script> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <style type="text/css"> /* 定义空间 */ .one{ width: 500px; height: 500px; border: 1px solid green; } .one>div{ width: 65px; height: 65px; border: 1px solid black; padding: 2px; margin: 15px; float: left; background: url(img/00.jpg); } .two{ width: 200px; height:50px; border: 2px solid black; } div >img{ display: none; } .gg{ width: 280px; height: 200px; border: 1px solid black; position: absolute; top: 19%; left: 6%; margin-left: -100px; background-image: url(img/gameover.jpg); display: none; } </style> <body> <!-- 创建表格 --> <div class="one"id="one"></div> <div class='two'> <div id="fen">积分:0分</div> <div id="miao">计时:0s</div> </div><input type="button" name="" id="starr" value="开始" onclick="star()" /> <input type="button" name="" id="" value="结束" onclick="end()"/> <div class="gg" id='dis'> 游戏结束 </div> </body> <script type="text/javascript"> var ss=0; var game=0; var gam=0; /* 使用for循环添加模块 */ for(let i=0;i<20;i++){ document.getElementById('one').innerHTML+="<div id='pic'><img id=img"+(i)+" src='img/01.jpg' onclick=Mouse(this)></div>"; } /* 创建开始方法 首先定义一个随机获取图片id的random 然后进行拼接查找 定义匿名函数 每秒刷新 再定义消失函数 '注'需要定义在及时函数内*/ /* console.log(num); */ function star(){ document.getElementById('starr').disabled=true; /* 定义计时器 使用fix分割*/ gam=setInterval(function(){ ss+=0.1; document.getElementById('miao').innerHTML="计时:"+ss.toFixed(2)+"s"; },100); game=setInterval(function(){ var num=parseInt(Math.random()*20); var a='img'+num; var picture=document.getElementById(a); console.log(picture); picture.style.display='block'; setTimeout(function(){ picture.style.display='none'; picture.src='img/01.jpg'; },2000); } ,1000); } var kk=0; /* 判断用户是否点击 进行加分 使用lastindexof 和substr截取*/ function Mouse(obj){ var src=obj.src; console.log(src); var cc=src.substr(src.lastIndexOf('01'),2); console.log(cc); if(cc==01){ kk+=1; obj.src='img/02.jpg'; } document.getElementById('fen').innerHTML="积分:"+kk+"分"; } /* 结束游戏 */ function end(){ kk=0; ss=0; document.getElementById('starr').disabled=false; document.getElementById('dis').style.display='block'; clearInterval(game); clearInterval(gam); } </script> </html>
此为第二个