代码在此，请品尝
在线地址：JS Bin - Collaborative JavaScript Debugging
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}.circle {width: 400px;height: 400px;border: 1px solid red;position: relative;margin: 50px auto;}.circle::after {content: "";display: block;width: 100%;height: 1px;background-color: red;position: absolute;left: 0;top: 50%;transform: translateY(-50%);}.circle::before {content: "";display: block;height: 100%;width: 1px;background-color: red;position: absolute;left: 50%;top: 0;transform: translateX(-50%);}.item {position: absolute;}.arrow {width: 50px;height: 50px;position: absolute;left: 50%;top: 50%;margin-left: -25px;margin-top: -25px;background-color: antiquewhite;border-radius: 100%;}.arrow::after {content: "";display: block;width: 10px;height: 40px;position: absolute;left: 50%;top: -40px;transform: translateX(-50%);background-color: antiquewhite;}.result {margin: 0 auto;display: flex;justify-content: center;}</style>
</head><body><div id="result" class="result"></div><div class="circle"><div class="item" style="left:30px;top:30px"><div>游园一场</div><div>游园活动0%</div></div><div class="item" style="right:30px;top:30px"><div>果切</div><div>果切活动89%</div></div><div class="item" style="right:30px;bottom:30px"><div>小礼品</div><div>小礼品10%</div></div><div class="item" style="left:30px;bottom:30px"><div>谢谢</div><div>感谢参与1%</div></div><div class="arrow" id="arrow"></div></div><div style="display: flex; justify-content: center;"><button id="start">开始游戏</button></div><script>function getRandomNumber(min, max) {return Math.floor(Math.random() * (max - min + 1)) + min;}function getTargetRoute() {// 设定中奖几率 果切活动89% 小礼品10% 感谢参与1% 游园活动0% （将游园活动的0几率排除） const fruitChance = 89;const giftChance = 10;const thankChance = 1;// 计算总的中奖几率 const totalChance = fruitChance + giftChance + thankChance;// 生成一个0到totalChance-1之间的随机数 const randomNum = Math.floor(Math.random() * totalChance);//基础圈数const baseRoute = 360 * this.getRandomNumber(4, 10)// 根据随机数确定中奖结果 let result;let roateif (randomNum < fruitChance) {result = '果切';roate = baseRoute + this.getRandomNumber(10, 80) //不是0到90 为了防止落在边边，造成分歧} else if (randomNum < fruitChance + giftChance) {result = '小礼品';roate = baseRoute + this.getRandomNumber(100, 170)} else {result = '感谢参与';roate = baseRoute + this.getRandomNumber(280, 350)}return {result,roate}}let timer = null;let playing = false;function startGame(targetInfo) {const {result,roate} = targetInfo;//初始速度let speed = 1;//初始旋转位置let currentRoate = 0;document.querySelector("#result").innerHTML = `即将中奖的是:${result}`const dom = document.querySelector("#arrow");clearInterval(timer)playing = true;timer = setInterval(() => {currentRoate += speed;dom.style.transform = 'rotate(' + currentRoate + 'deg)';const percent = currentRoate / roate;if (percent < 0.7) {speed += 0.1;console.log("速度增加", speed)}else if (percent >= 0.7 && speed > 0.5) {//speed > 0.5是用来兜底的，否则还没到目标节点speed -= 0.2;console.log("速度减少", speed)}if (currentRoate >= roate) {clearInterval(timer);playing = false;alert(`中大奖了：${result}`)}}, 20)}document.querySelector("#start").onclick = function () {if (playing) {return;}//提前获取开奖结果，和旋转角度const targetInfo = getTargetRoute();//开始游戏startGame(targetInfo);}</script>
</body></html>
)
