js四宫格抽奖

JS四宫格抽奖可以通过以下步骤实现：

1. 首先，需要定义一个包含所有奖品的数组，每个奖品包含奖品名称和奖品图片等信息。

2. 创建一个随机数生成函数，用于随机选取一个奖品。

3. 创建一个函数，用于将选中的奖品在页面上展示出来，可以使用HTML和CSS实现。

4. 创建一个点击事件，当用户点击抽奖按钮时，触发随机选取奖品的函数，将选中的奖品展示在页面上。

5. 可以添加一些动画效果，如旋转、闪烁等，增加用户体验。

下面是一个简单的JS四宫格抽奖的代码示例：

HTML部分：

<div class="lottery-container">
  <div class="lottery-item" id="lottery-item1">
    <img src="奖品1.png" alt="奖品1">
    <p>奖品1</p>
  </div>
  <<div class="lottery-item" id="lottery-item2">
    <img src="奖品2.png" alt="奖品2">
    <p>奖品2</p>
  </div>
  <div class="lottery-item" id="lottery-item3">
    <img src="奖品3.png" alt="奖品3">
    <p>奖品3</p>
  </div>
  <div class="lottery-item" id="lottery-item4">
    <img src="奖品4.png" alt="奖品4">
    <p>奖品4</p>
  </div>
</div>

<button class="lottery-btn" onclick="startLottery()">开始抽奖</button>

CSS部分：

.lottery-container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 400px;
}

.lottery-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 5px solid #ccc;
  overflow: hidden;
}

.lottery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lottery-item p {
  font-size: 18px;
  margin-top: 10px;
}

.lottery-btn {
  margin-top: 20px;
  padding: 10px 20px;
  font-size: 24px;
  background-color: #f00;
  color: #fff;
  border: none;
  border-radius: 5px;
}

.lottery-btn:hover {
  cursor: pointer;
}

JS部分：

var prizes = [
  {
    name: "奖品1",
    img: "奖品1.png"
  },
  {
    name: "奖品2",
    img: "奖品2.png"
  },
  {
    name: "奖品3",
    img: "奖品3.png"
  },
  {
    name: "奖品4",
    img: "奖品4.png"
  }
];

function getRandomPrize() {
  var randomIndex = Math.floor(Math.random() * prizes.length);
  return prizes[randomIndex];
}

function showPrize(prize) {
  var item = document.createElement("div");
  item.classList.add("lottery-item");
  item.innerHTML = `
    <img src="${prize.img}" alt="${prize.name}">
    <p>${prize.name}</p>
  `;
  var container = document.querySelector(".lottery-container");
  container.innerHTML = "";
  container.appendChild(item);
}

function startLottery() {
  var prize = getRandomPrize();
  showPrize(prize);
}