轮盘旋转动画结束后用自定义弹窗替代alert并实现复位

实现步骤 #

1. 新增自定义弹窗的HTML结构 #

在页面中添加默认隐藏的模态弹窗容器，用于展示中奖信息和操作按钮：

<!-- 自定义中奖弹窗 -->
<div id="prizeModal" class="modal">
  <div class="modal-content">
    <p id="prizeText"></p>
    <button id="confirmBtn">确定</button>
  </div>
</div>

2. 添加弹窗基础CSS样式 #

给弹窗添加居中显示的样式，保证视觉层级和遮罩效果：

.modal {
  display: none; /* 默认隐藏 */
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5); /* 半透明遮罩 */
}

.modal-content {
  background-color: #fff;
  margin: 15% auto;
  padding: 24px;
  border-radius: 8px;
  width: 320px;
  text-align: center;
}

#confirmBtn {
  padding: 10px 24px;
  margin-top: 16px;
  cursor: pointer;
  border: none;
  border-radius: 4px;
  background-color: #007bff;
  color: #fff;
}

3. 修改JavaScript逻辑 #

保留原有轮盘初始化和旋转逻辑，仅替换alertPrize函数为自定义弹窗触发逻辑：

// 初始化轮盘（保留原有配置参数）
let theWheel = new Winwheel({
  numSegments: 6,
  segments: [
    { fillStyle: "#eae56f", text: "奖品1" },
    { fillStyle: "#89f26e", text: "奖品2" },
    { fillStyle: "#7de6ef", text: "奖品3" },
    { fillStyle: "#e7706f", text: "奖品4" },
    { fillStyle: "#e7706f", text: "谢谢参与" },
    { fillStyle: "#b19cd9", text: "奖品5" }
  ],
  animation: {
    type: "spinToStop",
    duration: 5,
    spins: 8,
    callbackFinished: alertPrize // 旋转停止后触发自定义弹窗
  }
});

// 替换原系统alert的自定义弹窗函数
function alertPrize(indicatedSegment) {
  // 填充中奖信息
  document.getElementById('prizeText').textContent = `恭喜您获得：${indicatedSegment.text}`;
  // 显示弹窗
  document.getElementById('prizeModal').style.display = "block";
  
  // 绑定确定按钮的复位事件
  document.getElementById('confirmBtn').onclick = function() {
    // 隐藏弹窗
    document.getElementById('prizeModal').style.display = "none";
    // 轮盘复位至初始状态
    theWheel.stopAnimation(false);
    theWheel.rotationAngle = 0;
    theWheel.draw();
  }
}

// 保留原Spin按钮点击逻辑
document.getElementById('spinButton').addEventListener('click', function() {
  theWheel.startAnimation();
});

关键修改说明 #

• 移除原系统alert()调用，改为操作DOM显示自定义弹窗
• 给弹窗确定按钮绑定点击事件，触发轮盘复位（停止动画、重置旋转角度、重新绘制）
• 轮盘初始化、启动旋转的核心逻辑完全保留

内容的提问来源于stack exchange，提问作者taha akram