javascript九宫格

JavaScript宫格是一种排列方式，通常用于创建网页中的九宫格布局。在九宫格中，每个格子都有自己的背景颜色，并且可以实现拖拽换位的功能。当点击某个格子并拖动鼠标时，该格子会跟随鼠标的移动而移动，并且在原来的位置也会出现一个相同的格子。当释放鼠标时，最近的一个格子会与被拖拽的格子进行位置交换。

要创建一个九宫格，可以使用HTML和JavaScript来实现。首先，创建一个父级元素(div)，并设置样式使其呈现九宫格的形式。可以使用for循环嵌套来生成九个子格子，并为每个格子设置背景颜色。可以使用Math.random()和Math.floor()来生成随机的背景颜色。

在实现拖拽换位的功能时，可以通过鼠标事件监听点击、移动和释放的动作。当点击某个格子时，记录下该格子的位置，并在鼠标移动过程中，实时更新该格子的位置。当释放鼠标时，通过计算距离最近的格子，将两个格子进行位置交换。

相关问题

html 九宫格游戏

九宫格游戏是一种常见的小游戏，可以通过HTML和CSS来实现。首先，我们需要创建一个HTML文档，然后使用CSS样式进行美化。

在HTML文档中，我们可以使用<div>元素来创建一个九宫格的框架。在每个<div>元素中，我们可以使用<a>元素或图片元素来添加相应的游戏内容，例如图片或文字。

使用CSS样式，我们可以对<div>元素进行布局和美化。可以设置每个<div>元素的大小、边框颜色、背景颜色等。还可以利用CSS的flex布局属性来实现九宫格的排列。

当用户点击游戏区域时，我们可以通过JavaScript来处理相应的逻辑。例如，可以通过添加点击事件监听器来触发相应的动作，例如改变图片的显示或文字的变化。

为了增加游戏的趣味性，我们还可以添加一些动画效果来提升用户体验。例如，可以使用CSS的transition属性来添加过渡效果，使游戏内容在点击时有一定的动态变化。

总结来说，通过HTML和CSS的组合，我们可以创建一个简单的九宫格游戏。使用JavaScript来处理用户的交互，并添加一些动画效果可以进一步增强游戏的趣味性。

jquery九宫格抽奖

以下是使用jQuery实现九宫格抽奖的示例代码：

HTML代码：

<div class="lottery">
  <ul>
    <li><a href="#"><img src="img/1.png"></a></li>
    <li><a href="#"><img src="img/2.png"></a></li>
    <li><a href="#"><img src="img/3.png"></a></li>
    <li><a href="#"><img src="img/4.png"></a></li>
    <li><a href="#"><img src="img/5.png"></a></li>
    <li><a href="#"><img src="img/6.png"></a></li>
    <li><a href="#"><img src="img/7.png"></a></li>
    <li><a href="#"><img src="img/8.png"></a></li>
    <li><a href="#"><img src="img/9.png"></a></li>
  </ul>
  <a href="#" class="btn">开始抽奖</a>
</div>

CSS代码：

.lottery {
  width: 500px;
  margin: 0 auto;
  text-align: center;
}
.lottery ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline-block;
}
.lottery ul li {
  float: left;
  margin-right: 10px;
}
.lottery ul li:last-child {
  margin-right: 0;
}
.lottery ul li a {
  display: block;
  width: 150px;
  height: 150px;
  border: 1px solid #ccc;
  text-align: center;
  line-height: 150px;
  font-size: 24px;
  color: #333;
  text-decoration: none;
}
.lottery ul li a img {
  max-width: 100%;
  max-height: 100%;
}
.lottery .btn {
  display: inline-block;
  margin-top: 20px;
  padding: 10px 20px;
  font-size: 24px;
  color: #fff;
  background-color: #f00;
  border-radius: 5px;
  text-decoration: none;
}

JavaScript代码：

$(function() {
  var lottery = {
    index: -1, // 当前转动到哪个位置，起点位置
    count: 0, // 总共有多少个位置
    timer: 0, // setTimeout的ID，用clearTimeout清除
    speed: 20, // 初始转动速度
    times: 0, // 转动次数
    cycle: 50, // 转动基本次数：即至少需要转动多少次再进入抽奖环节
    prize: -1, // 中奖位置
    init: function(id) {
      if ($("#" + id).find(".lottery-unit").length > 0) {
        $lottery = $("#" + id);
        $units = $lottery.find(".lottery-unit");
        this.obj = $lottery;
        this.count = $units.length;
        $lottery.find(".lottery-unit-" + this.index).addClass("active");
      }
    },
    roll: function() {
      var index = this.index;
      var count = this.count;
      var lottery = this.obj;
      $(lottery).find(".lottery-unit-" + index).removeClass("active");
      index += 1;
      if (index > count - 1) {
        index = 0;
      }
      $(lottery).find(".lottery-unit-" + index).addClass("active");
      this.index = index;
      return false;
    },
    stop: function(index) {
      this.prize = index;
      return false;
    }
  };

  function roll() {
    lottery.times += 1;
    lottery.roll();
    if (lottery.times > lottery.cycle + 10 && lottery.prize == lottery.index) {
      clearTimeout(lottery.timer);
      lottery.prize = -1;
      lottery.times = 0;
      click = false;
    } else {
      if (lottery.times < lottery.cycle) {
        lottery.speed -= 10;
      } else if (lottery.times == lottery.cycle) {
        var index = Math.random() * (lottery.count) | 0;
        lottery.prize = index;
      } else {
        if (lottery.times > lottery.cycle + 10 && ((lottery.prize == 0 && lottery.index == 7) || lottery.prize == lottery.index + 1)) {
          lottery.speed += 110;
        } else {
          lottery.speed += 20;
        }
      }
      if (lottery.speed < 40) {
        lottery.speed = 40;
      }
      lottery.timer = setTimeout(roll, lottery.speed);
    }
    return false;
  }

  var click = false;

  $(document).ready(function() {
    lottery.init('lottery');
    $(".btn").click(function() {
      if (click) {
        return false;
      } else {
        lottery.speed = 100;
        roll();
        click = true;
        return false;
      }
    });
  });
});