实现可配置的自定义转盘组件

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 turn-btn" data-type="pan">转盘转动</button>
 4     <button class="btn btn-default turn-btn" data-type="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: 6em;
 65     top: 50%;
 66     left: 50%;
 67     margin-top: -3em;
 68     margin-left: -8px;
 69     background-size: 100% 100%;
 70     transform-origin: 50% 50%;
 71     background: #ffffff;
 72     border-radius: 50%;
 73 }
 74 
 75 .turntableArrow::after {
 76     content: '';
 77     display: block;
 78     position: absolute;
 79     border-width: 0 20px 40px;
 80     border-style: solid;
 81     border-color: transparent transparent #ffffff;
 82     top: -33px;
 83     left: 50%;
 84     margin-left: -20px;
 85 }
 86 
 87 .alert {
 88     display: none;
 89     width: 100%;
 90     height: 100%;
 91     background: rgba(0, 0, 0, .6);
 92     position: fixed;
 93     z-index: 10;
 94     top: 0;
 95     left: 0;
 96 }
 97 
 98 .alertBox {
 99     width: 20em;
100     height: 10em;
101     background: #fff;
102     color: #000;
103     margin: 25em auto 0;
104     box-sizing: border-box;
105     padding: 3em 0;
106 }

View Code

js脚本（依赖Jquery，可以改原生实现）：

  1 $(() => {
  2     var $turntable = $('.turntable');
  3     var $turntableNum = $('.turntableNum');
  4     var $turntableBtn = $('.setTurntable');
  5     var $turntableArrow = $('.turntableArrow');
  6     var $turnBtn = $('.btn-turn');
  7     var $alert = $('.alert');
  8     var $sureBtn = $('.initTurntable');
  9     var degObg = {};
 10     var $style = $('.turntableStyle');
 11     var turnType = 'pan';
 12     var btnFlag = false;
 13 
 14     function color16() { //十六进制颜色随机
 15         var r = Math.floor(Math.random() * 256);
 16         var g = Math.floor(Math.random() * 256);
 17         var b = Math.floor(Math.random() * 256);
 18         var color = '#' + r.toString(16) + g.toString(16) + b.toString(16);
 19         return color;
 20     }
 21 
 22     function turn(type) {
 23         turnType = type;
 24     }
 25 
 26     $turnBtn.click((e) => {
 27         var $this = $(e.currentTarget);
 28         var btnType = $this.attr('data-type');
 29 
 30         turn(btnType);
 31     });
 32 
 33     $turntableBtn.click(() => {
 34         var turntableNum = $turntableNum.val();
 35 
 36         if (turntableNum < 3) {
 37             alert('建议转盘格数≥3');
 38             return;
 39         }
 40 
 41         $turntable.html('');
 42         var turntableHtml = '';
 43 
 44         for (var i = 0; i < turntableNum; i++) {
 45             var rotateDeg = i * (360 / turntableNum);
 46             var skewDeg = 360 / turntableNum - 90;
 47             var bgColor = color16();
 48             degObg[i] = rotateDeg;
 49             turntableHtml += `
 50                 <li class="slice slice-${i}" 
 51                 style="transform: rotate(${rotateDeg}deg) skewY(${skewDeg}deg); background: ${bgColor}">
 52                 <span style="transform: rotate(0deg) skewY(${-skewDeg}deg)">商品${i + 1}</span></li>`
 53         }
 54 
 55         $turntable.html(turntableHtml);
 56     });
 57 
 58     $turntableArrow.click(() => {
 59         var turntableNum = $turntableNum.val();
 60         var turnTime = 0;
 61 
 62         if (turntableNum < 3) {
 63             alert('建议转盘格数≥3');
 64             return;
 65         }
 66 
 67         if (btnFlag) {
 68             return;
 69         }
 70         btnFlag = true;
 71 
 72         if (turnType === 'pan') {
 73             var prizeId = parseInt(Math.random() * turntableNum);
 74             var rotateFinal = 360 * 5 + (360 - degObg[prizeId]) - 180 / turntableNum;
 75             turnTime = 2 / 3 * turntableNum;
 76 
 77             $turntable.css({
 78                 transition: `all ${turnTime}s ease-out 0s`,
 79                 transform: `rotate(${rotateFinal}deg)`
 80             });
 81         } else {
 82             var prizeId = parseInt(Math.random() * turntableNum);
 83             var rotateFinal = 360 * 5 + degObg[prizeId] + 180 / turntableNum;
 84             turnTime = 2 / 8 * turntableNum < 2 ? 2 : 2 / 8 * turntableNum;
 85             $turntableArrow.css({
 86                 transition: `all ${turnTime}s ease-out 0s`,
 87                 transform: `rotate(${rotateFinal}deg)`
 88             });
 89         }
 90 
 91         setTimeout(() => {
 92             $alert.find('.prizeText').text(`恭喜您抽中商品${prizeId + 1}`);
 93             $alert.show();
 94         }, turnTime * 1000 + 500);
 95     });
 96 
 97     $sureBtn.click(() => {
 98         btnFlag = false;
 99         $alert.hide();
100         $turntable.css({
101             transition: `all 0s ease-out 0s`,
102             transform: `rotate(0deg)`
103         });
104         $turntableArrow.css({
105             transition: `all 0s ease-out 0s`,
106             transform: `rotate(0deg)`
107         });
108     });
109 
110     $turntableBtn.click();
111 });

View Code

以上可以实现一个自定义转盘格数（建议大于等于3、转盘或指针转动、并获取停止时的指向），效果如下：

转盘转动 指针转动 生成转盘

• 1

 

 

确定

转载于:https://www.cnblogs.com/cindyW/p/11544539.html