JS实现九宫图小游戏（9.26）_9宫格游戏圈圈叉叉 js-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45200954/article/details/108814372
<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>九宫格</title>
    <script type="text/javascript" src="jquery-3.3.1.js"></script>
    <script text="text/javascript" src="flexible.min.js"></script>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    html,body{
        width: 100%;
        height: 100%;
        background-color: lightgray;
    }
    body{
      display: flex;
    }
    .container{
        flex: 7;
        background-color: white;
        margin: 5% auto;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        max-width: 100%;
        max-height: 100%;
    }
    .switch{
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 5% auto;
      flex: 3;
      background-color: thistle;
      
    }
    .btn{
      flex: 1;
      background-color: red;
      height: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
    }
    .btn button{
      width: 30%;
      height: 10%;
      margin-top: 4%;
    }
    .container div{
        width: 33%;
        height: 33.3%;

        border: 1px solid;
        display: flex;
        
        justify-content: center;
        align-items: center;
    }
    .container div:last-child{
        
        background-color: white;
        display: flex;
        justify-content: center;
    }
    h1{
        background-color: yellow;
    }
</style>

<body>
    <div class="container">
     <div class="content"><h1>1</h1></div>   
     <div class="content"><h1>8</h1></div>   
     <div class="content"><h1>4</h1></div>   
     <div class="content"><h1>3</h1></div>   
     <div class="content"><h1>7</h1></div>   
     <div class="content"><h1>2</h1></div>   
     <div class="content"><h1>6</h1></div>   
     <div class="content"><h1>5</h1></div>   
     <div class="empty"></div>   
    </div>
    <div class="switch">
      <div class="btn">
      <button class="start">开始计时</button>
      <h class="time" style="font-size: 2vw;"></h>
      <button class="end">暂停计时</button>
      </div> 
    </div>
</body>
<script>
  //秒
  var a=0;
  //分
  var b=0;
  //要使用 clearInterval() 方法, 在创建计时方法时你必须使用全局变量：
//   myVar=setInterval("javascript function",milliseconds);
//  然后你可以使用 clearInterval() 方法来停止执行 
    $(function(){
      //开始计时
     $(".start").click(function(){
       oo();
       setInterval(setTime,1000);
     })
     //暂停计时
    $(".end").click(function(){
       alert("Hello World");
    })
    })
    function oo(){
      var beside = {
        "1":["2","4"],
        "2":["1","3","5"],
        "3":["2","6"],
        "4":["1","5","7"],
        "5":["2","4","6","8"],
        "6":["3","5","9"],
        "7":["4","8"],
        "8":["5","7","9"],
        "9":["6","8"]
      }
      $('.content').click(function(){
        var click_num = $(this).index()+1;
        var no_see_num = $('.empty').index()+1;
        var arr = beside[no_see_num];
        if(jQuery.inArray(String(click_num), arr)=='-1'){
          alert("这里不能挪位!!!!!!!!!!");
        }else{
        // $在JS应用库JQUERY的作者将之做为一个自定义函数名了，这个函数是获取指定网页元素的函数
        //clone方法
          var t = $(this).clone();
          $(".empty").before(t);
          $(this).before($(".empty"));
          t.before($(this));
          t.remove();
        }
      })
    }
  // -------------------------------------------------------------  
   function setTime(){
    ++a;
    if(a==60){
      a=0;
      ++b;
      $(".time").text(b+"分"+a+"秒");
    }else{
      
      $(".time").text(b+"分"+a+"秒");
    }
   }
  
  </script>

</html>