html代码：
1 <div class="turntableMain border-shadow text-center"> 2 <input type="number" class="turntableNum" placeholder="请输入转盘格数(≥3)" value="3" /> 3 <button class="btn btn-default" onClick="turn(‘pan‘)">转盘转动</button> 4 <button class="btn btn-default" onClick="turn(‘arrow‘)">指针转动</button> 5 <button class="btn btn-default setTurntable">生成转盘</button> 6 7 <div class="turntableCon"> 8 <ul class="turntable"> 9 <li class="slice"></li> 10 </ul> 11 <div class="turntableArrow"></div> 12 </div> 13 14 <div class="alert"> 15 <div class="alertBox text-center"> 16 <p class="prizeText"></p> 17 <button class="btn btn-default initTurntable">确定</button> 18 </div> 19 </div> 20 </div>
css代码：
1 .turntableMain { 2 padding: 5em 0; 3 text-align: center; 4 } 5 6 .turntableCon { 7 position: relative; 8 margin: 5rem auto; 9 width: 37em; 10 height: 37em; 11 } 12 13 .turntable { 14 position: relative; 15 margin: 5rem auto; 16 width: 37em; 17 height: 37em; 18 border-radius: 100%; 19 list-style: none; 20 overflow: hidden; 21 transform: rotate(0deg); 22 background: #ddd; 23 display: block; 24 } 25 26 .turntable::after { 27 content: ‘‘; 28 display: block; 29 width: 100%; 30 height: 100%; 31 position: absolute; 32 background-position: center -6.5em; 33 opacity: 0; 34 } 35 36 .slice { 37 overflow: hidden; 38 position: absolute; 39 top: -50%; 40 right: -50%; 41 width: 100%; 42 height: 100%; 43 transform-origin: 0% 100%; 44 transform: rotate(0deg) skewY(0deg); 45 font-size: 16px; 46 color: #333; 47 border: 1px solid #fff; 48 } 49 50 .slice span { 51 position: absolute; 52 bottom: 4em; 53 left: 1em; 54 font-weight: bold; 55 background: #fff; 56 padding: 5px; 57 border-radius: 10px; 58 } 59 60 .turntableArrow { 61 cursor: pointer; 62 position: absolute; 63 width: 6em; 64 height: 8em; 65 top: 50%; 66 left: 50%; 67 margin-top: -5em; 68 margin-left: -3em; 69 background-size: 100% 100%; 70 transform-origin: 50% 64%; 71 } 72 73 .alert { 74 display: none; 75 width: 100%; 76 height: 100%; 77 background: rgba(0, 0, 0, .6); 78 position: fixed; 79 z-index: 10; 80 top: 0; 81 left: 0; 82 } 83 84 .alertBox { 85 width: 20em; 86 height: 10em; 87 background: #fff; 88 color: #000; 89 margin: 25em auto 0; 90 box-sizing: border-box; 91 padding: 3em 0; 92 }
js脚本（依赖Jquery，可以改原生实现）：
1 $(() => { 2 var $turntable = $(‘.turntable‘); 3 var $turntableNum = $(‘.turntableNum‘); 4 var $turntableBtn = $(‘.setTurntable‘); 5 var $turntableArrow = $(‘.turntableArrow‘); 6 var $alert = $(‘.alert‘); 7 var $sureBtn = $(‘.initTurntable‘); 8 var degObg = {}; 9 var $style = $(‘.turntableStyle‘); 10 var turnType = ‘pan‘; 11 var btnFlag = false; 12 13 function color16() { //十六进制颜色随机 14 var r = Math.floor(Math.random() * 256); 15 var g = Math.floor(Math.random() * 256); 16 var b = Math.floor(Math.random() * 256); 17 var color = ‘#‘ + r.toString(16) + g.toString(16) + b.toString(16); 18 return color; 19 } 20 21 function turn(type) { 22 turnType = type; 23 } 24 25 $turntableBtn.click(() => { 26 var turntableNum = $turntableNum.val(); 27 28 if (turntableNum < 3) { 29 alert(‘建议转盘格数≥3‘); 30 return; 31 } 32 33 $turntable.html(‘‘); 34 var turntableHtml = ‘‘; 35 36 for (var i = 0; i < turntableNum; i++) { 37 var rotateDeg = i * (360 / turntableNum); 38 var skewDeg = 360 / turntableNum - 90; 39 var bgColor = color16(); 40 degObg[i] = rotateDeg; 41 turntableHtml += ` 42 <li class="slice slice-${i}" 43 style="transform: rotate(${rotateDeg}deg) skewY(${skewDeg}deg); background: ${bgColor}"> 44 <span style="transform: rotate(0deg) skewY(${-skewDeg}deg)">商品${i + 1}</span></li>` 45 } 46 47 $turntable.html(turntableHtml); 48 }); 49 50 $turntableArrow.click(() => { 51 var turntableNum = $turntableNum.val(); 52 var turnTime = 0; 53 54 if (turntableNum < 3) { 55 alert(‘建议转盘格数≥3‘); 56 return; 57 } 58 59 if (btnFlag) { 60 return; 61 } 62 btnFlag = true; 63 $style[0].innerHTML = ‘‘; 64 65 if (turnType === ‘pan‘) { 66 var prizeId = parseInt(Math.random() * turntableNum); 67 var rotateFinal = 360 * 5 + (360 - degObg[prizeId]) - 180 / turntableNum; 68 turnTime = 2 / 3 * turntableNum; 69 var turntableStyle = ` 70 .turntableAni { 71 transition: all ${turnTime}s ease-out; 72 transform: rotate(${rotateFinal}deg); 73 }`; 74 75 $style[0].type = ‘text/css‘; 76 $style[0].innerHTML = turntableStyle; 77 78 $turntable.addClass(‘turntableAni‘); 79 } else { 80 var prizeId = parseInt(Math.random() * turntableNum); 81 var rotateFinal = 360 * 5 + degObg[prizeId] + 180 / turntableNum; 82 turnTime = 2 / 8 * turntableNum < 2 ? 2 : 2 / 8 * turntableNum; 83 var turntableStyle = ` 84 .turntableAni { 85 transition: all ${turnTime}s ease-out; 86 transform: rotate(${rotateFinal}deg); 87 }`; 88 89 $style[0].type = ‘text/css‘; 90 $style[0].innerHTML = turntableStyle; 91 92 $turntableArrow.addClass(‘turntableAni‘); 93 } 94 95 setTimeout(() => { 96 $alert.find(‘.prizeText‘).text(`恭喜您抽中商品${prizeId + 1}`); 97 $alert.show(); 98 }, turnTime * 1000 + 500); 99 }); 100 101 $sureBtn.click(() => { 102 btnFlag = false; 103 $alert.hide(); 104 $style[0].innerHTML = ‘‘; 105 $turntable.removeClass(‘turntableAni‘); 106 $turntableArrow.removeClass(‘turntableAni‘); 107 }); 108 109 $turntableBtn.click(); 110 });
以上可以实现一个自定义转盘格数（建议大于等于3、转盘或指针转动、并获取停止时的指向），效果如下：
原文：https://www.cnblogs.com/cindyW/p/11544539.html
