js打地鼠

最新推荐文章于 2024-10-01 20:12:28 发布

- 瑾♛年

最新推荐文章于 2024-10-01 20:12:28 发布

阅读量30

点赞数

文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/qq_52840130/article/details/134956793

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style>
           *{
               padding: 0;
               margin: 0;
           }
           ul,li{
               list-style: none;
           }
           ul div{
               width: 350px;
               height: 100px;

           }
           li{
               width: 100px;
               height: 100px;
               border: 1px solid black;
               border-radius: 50%;
               position: relative;
               float: left;
               text-align: center;
               line-height: 100px;
           }
           img{
               width: 70%;
               height: 70%;
               position: absolute;
               top: 10px;
               left: 10px;
               border-radius: 50%;
               display: none;

           }
           span{
               display: none;
           }
       </style>
   </head>
   <body>
       <div>
           <ul>
               <div>
               <li class="left"><img src="img/1.jpg"/><span>BOOM!</span></li>
               <li><img src="img/1.jpg"/><span>BOOM!</span></li>
               <li><img src="img/1.jpg"/><span>BOOM!</span></li>
               </div>
               <div>
               <li><img src="img/1.jpg"/><span>BOOM!</span></li>
               <li><img src="img/1.jpg"/><span>BOOM!</span></li>
               <li><img src="img/1.jpg"/><span>BOOM!</span></li>
               </div>
               <div>
               <li><img src="img/1.jpg"/><span>BOOM!</span></li>
               <li><img src="img/1.jpg"/><span>BOOM!</span></li>
               <li><img src="img/1.jpg"/><span>BOOM!</span></li>
               </div>
           </ul>
           <button id="btn">开始游戏</button>
           <button id="end">结束游戏</button>
       </div>
       <script>
           var ul=document.querySelector('ul')
           var img=document.querySelectorAll('li img')
           var li=document.querySelectorAll('li')
           var btn=document.querySelector('#btn')
           var end=document.querySelector('#end')
           var span=document.querySelectorAll('span')
           var timer=null
           var index=0
           btn.οnclick=function(){
           clearInterval(timer)
           timer=setInterval(function(){
           index=parseInt(Math.random()*(9-0))
           img[index].style.display='block'
           },2000)
           }
           end.οnclick=function(){
           clearInterval(timer)
           }
           for(let i=0;i<img.length;i++){
               img[i].οnclick=function(){

                   this.style.display='none'

                   span[i].style.display='block'
           setInterval(function(){
               span[i].style.display='none'
           },500)
               }
           }

       </script>
   </body>
</html>