jQuery写个扭蛋机的抽奖

好的，以下是一个使用 jQuery 实现的扭蛋机抽奖的代码示例：

HTML 部分：

<div id="gashapon">
  <div id="handle"></div>
</div>

jQuery 部分：

$(document).ready(function() {
  var prizes = ["奖品 A", "奖品 B", "奖品 C", "奖品 D", "奖品 E"];
  
  $("#handle").click(function() {
    var prizeIndex = Math.floor(Math.random() * prizes.length);
    var prize = prizes[prizeIndex];
    alert("恭喜你获得了 " + prize);
  });
});

这段代码实现了当用户点击扭蛋机的把手时，随机弹出一个奖品。可以根据需要调整奖品列表和其他行为。

相关问题

小程序实现一个扭蛋机抽奖

好的，实现一个扭蛋机抽奖小程序的步骤如下：

1. 设计扭蛋机的界面，包括扭蛋机的外形和扭蛋的样式等。

2. 编写程序实现扭蛋机的转动效果。可以使用CSS3动画或者JavaScript实现。

3. 编写程序随机生成扭蛋的奖品。可以使用数组或者对象来存储奖品信息，然后通过随机数来获取对应的奖品。

4. 编写程序实现抽奖功能。当用户点击抽奖按钮时，程序会随机生成一个奖品，并在扭蛋机中显示对应的扭蛋。

5. 编写程序实现历史中奖记录的存储和显示。可以使用本地存储或者服务器存储来保存中奖记录，并在界面中显示出来。

6. 最后对程序进行测试和调试，确保程序的稳定性和用户体验。

以上是实现扭蛋机抽奖小程序的基本步骤，你可以参考这些步骤来完成你的小程序开发。

小程序实现一个扭蛋机抽奖详细代码

好的，以下是一个简单的小程序实现扭蛋机抽奖的代码，具体实现细节可以根据自己的需要进行调整和修改：

1. HTML代码：

<!-- 扭蛋机界面 -->
<div class="gashapon">
  <div class="gashapon-body">
    <div class="gashapon-window">
      <div class="gashapon-inner"></div>
    </div>
    <div class="gashapon-handle"></div>
  </div>
  <button class="gashapon-button">抽奖</button>
</div>

<!-- 中奖记录 -->
<div class="record">
  <h3>中奖记录</h3>
  <ul class="record-list"></ul>
</div>

2. CSS代码：

/* 扭蛋机样式 */
.gashapon {
  width: 300px;
  height: 400px;
  position: relative;
  margin: 50px auto;
}

.gashapon-body {
  width: 100%;
  height: 100%;
  background: #eee;
  border-radius: 20px;
  position: relative;
  overflow: hidden;
}

.gashapon-window {
  width: 100%;
  height: 70%;
  background: #fff;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 10px #444;
}

.gashapon-inner {
  width: 100%;
  height: 100%;
  background: url("gashapon.png") no-repeat center;
  background-size: contain;
  position: absolute;
  top: 0;
  left: 0;
  animation: gashapon-rotate 5s linear infinite;
  transform-origin: center center;
}

.gashapon-handle {
  width: 50px;
  height: 50px;
  background: #f00;
  border-radius: 50%;
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}

.gashapon-button {
  display: block;
  width: 100px;
  height: 40px;
  background: #f00;
  color: #fff;
  border: none;
  border-radius: 20px;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 20px;
  cursor: pointer;
}

/* 中奖记录样式 */
.record {
  width: 300px;
  margin: 0 auto;
}

.record h3 {
  text-align: center;
}

.record-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.record-list li {
  margin-bottom: 10px;
}

3. JavaScript代码：

// 定义奖品列表
var prizeList = [
  {
    name: "一等奖",
    src: "prize1.png"
  },
  {
    name: "二等奖",
    src: "prize2.png"
  },
  {
    name: "三等奖",
    src: "prize3.png"
  },
  {
    name: "幸运奖",
    src: "prize4.png"
  }
];

// 获取DOM元素
var gashapon = document.querySelector(".gashapon");
var gashaponInner = document.querySelector(".gashapon-inner");
var gashaponButton = document.querySelector(".gashapon-button");
var recordList = document.querySelector(".record-list");

// 定义变量
var isRunning = false; // 是否正在转动
var prizeIndex = -1; // 中奖奖品索引

// 抽奖函数
function lottery() {
  if (isRunning) return; // 如果正在转动，则退出函数
  isRunning = true; // 设置正在转动标志

  // 随机生成一个奖品索引
  prizeIndex = Math.floor(Math.random() * prizeList.length);

  // 转动扭蛋机
  gashaponInner.style.animationPlayState = "running";

  // 2秒后停止转动
  setTimeout(function() {
    isRunning = false;
    gashaponInner.style.animationPlayState = "paused";
    showPrize(prizeList[prizeIndex]); // 显示中奖信息
  }, 2000);
}

// 显示中奖信息
function showPrize(prize) {
  // 创建中奖信息DOM元素
  var li = document.createElement("li");
  var img = document.createElement("img");
  img.src = prize.src;
  var span = document.createElement("span");
  span.textContent = prize.name;
  li.appendChild(img);
  li.appendChild(span);

  // 将中奖信息添加到记录列表中
  recordList.appendChild(li);
}

// 绑定抽奖按钮的单击事件
gashaponButton.addEventListener("click", lottery);

以上就是一个简单的小程序实现扭蛋机抽奖的代码，可以根据自己的需要进行修改和完善。