让我为大家介绍一下转盘的实现过程与原理，介绍都放在下面代码块中，一步一步的教会你。
我们转盘使用线段来实现
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .boss { width: 400px; height: 400px; border: 5px solid #000; margin: 0 auto; border-radius: 50%; position: relative; } .box1 { width: 2px; height: 200px; position: absolute; background-color: #000; top: 0; left: 50%; margin-left: -1px; transform-origin: bottom; } .box2 { width: 1px; height: 200px; background-color: red; position: absolute; top: 0; left: 50%; transform-origin: bottom; z-index: 99; transition: 2s; } </style> </head> <body> <!-- boss是最大的容器 --> <div class="boss"> <!-- box2是旋转需要用到的指针 --> <div class="box2"></div> </div> <!-- 动态设置转盘的份数 需要用到表单与按钮 --> 份数：<input type="number" id="inputs" placeholder="请输入份数" /> <!-- 确定按钮 行内点击事件 --> <button type="button" onclick="func()">确定份数</button> <!-- 点击开始旋转 行内点击事件--> <button type="button" onclick="myFunc()">点击旋转</button> <!-- boss1存放设置概率的表单 --> <div class="boss1"></div> </body> <script type="text/javascript"> // 获取input表单 var inputs = document.getElementById("inputs"); // 获取boss容器 var boss = document.querySelector(".boss"); // 获取存放概率表单的boss1 var boss1 = document.querySelector(".boss1"); var num = 0; // 点击确定分成多少等份 function func() { // 点击后会清空设置好的份数 但我们的指针不能删除 boss.innerHTML = "<div class='box2'></div>"; // 点击后控制概率的表单也得清空 boss1.innerHTML = ""; // 把inputs.value也就是控制份数的表单的value值存到num中 num = inputs.value; // 判断 如果我表单中输入了1那么就返回 if (num <= 1) { return; } // 循环创建线段 转盘的份数 小于我表单输入的数字 因为是从0开始循环 // 就不需要等于num for (var i = 0; i < num; i++) { // 创建div 相当于线段 var divs = document.createElement("div"); // 创建input表单 控制每一份的概率 var inp = document.createElement("input"); // 我们把事先准备好的box1类名添加给divs divs.className = "box1"; // 旋转的角度 360/份数 * i 就可以得出我们份数旋转到的位置 divs.style.transform = `rotate(${360 / num * i}deg)` // 我们把divs添加到boss里 boss.appendChild(divs); // 把inp添加到boss1里 boss1.appendChild(inp); } } // 存一个sum = 0 到时候控制度数 var sum = 0; // 控制点击旋转按钮不能连点 var isFlag = true // 点击旋转 function myFunc() { // 当isFlag为真时执行 if (isFlag == true) { // 创建一个新数组 存概率 如果我在第一个概率表单中输入100 就生成100个1 var arrs = []; var nums = 0; // 获取指针 var box2 = document.querySelector(".box2"); // 获取控制概率的表单的集合 var boss1_inp = document.querySelectorAll(".boss1 input"); // 循环 j<概率表单的长度 for (var j = 0; j < boss1_inp.length; j++) { // 使用我们事先准备好的nums += 概率表单总体的概率总和 // 我们需要把概率表单中的字符串变为Number 要不然就是字符串拼接了 nums += Number(boss1_inp[j].value); // 循环添加进arrs for (var i = 0; i < boss1_inp[j].value; i++) { // j+1 如果是下标为0 且给的概率为50 就是50个1 arrs.push(j + 1) } } // 判断nums 不能大于 100 if (nums > 100) { console.log("总和值不能大于100"); alert("总和值不能大于100"); } else { // 如果小于100 给一个随机数去随机0-arrs.length范围中的数 向下取整 // 用随机下标去获取arrs数组中的元素 var aa = arrs[Math.floor(Math.random() * arrs.length)]; // 随机的角度 要不然指针一直指向一个地方 var bb = Math.floor(Math.random() * 360 / boss1_inp.length); // sum+=1 控制连续点击 如果不设置指针会从最开始的地方再进行旋转 sum += 1; // 指针旋转角度控制概率后 // 旋转的角度 = 数组随机的值*360度/概率表单的长度+1080(先让指针旋转1080度)*连续点击的次数-随机的角度 box2.style.transform = `rotate(${aa * 360 / boss1_inp.length + 1080 * sum - bb}deg)`; } // 点击后isFlag赋值为false 就不可以连点了 isFlag = false // 这里我使用比较暴力的办法，我直接就看它的间隔时间 2s后isFlag为true // 就可以继续点击了 setTimeout(function () { isFlag = true }, 2000) } } </script> </html>
效果图：
感谢大家的阅读，如有不对的地方，可以向我提出，感谢大家！
