抽奖转盘示例
之前的代码示例有点问题，alert弹窗确认后转盘会再次转动，需要在停止转动时取消转盘的动画效果，防止再次转动。
代码示例
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>抽奖转盘</title> </head> <body> <h1 style="color: cadetblue;"> 2026.3.4 周三 抽奖转盘抽奖活动开始！ </h1> <div> <div> <div ref='prizeWrap' :style="bgStyle"> <div v-for="(item, index) in prizeList" :key="index" :style="prizeStyle(index)"> <p>{ { item.name }}</p> </div> </div> <div @click="handleClickWheel">抽奖</div> </div> </div> <!-- 1. 第一个script：仅引入Vue2库，无内部代码 --> <script></script> <!-- 2. 第二个script：专门写自己的Vue代码 --> <script> var app = new Vue({ el: '#app', data: { bgList: [ { outer: '#FF815E', inner: '#FF4562' }, // 红：一等奖 { outer: '#FFDB9D', inner: '#FFAB51' }, // 橙：二等奖 { outer: '#FFE9BB', inner: '#FFF6DF' }, // 黄：三等奖