轉盤抽獎-- 本身手擼

本身很菜，不能否認。
因此上週日試試水，看看本身可否寫個圓盤抽獎的demo。
// github L6zt
開發思路

• 佈局 css rotate 佈局；
• 抽獎過渡效果，採用css3 transition；
• 動態計算抽獎結束時的角度，賦值給待選擇的元素。

效果圖

代碼

<div class="rotate tn">
        <!-- 外部圓-->
        <div class="out-circle">
            <p class="p1">1</p>
            <p class="p2">2</p>
            <p class="p3">3</p>
        </div>
         <!--內部園-->
        <div class="inner-circle">
            <p class="p11">a</p>
            <p class="p12">b</p>
            <p class="p13">c</p>
            <p class="p14">d</p>
            <p class="p15">e</p>
            <p class="p16">f</p>
        </div>
    </div>
    <div class="start-game">
        <label for="num">
            <input 
                   type="text" 
                   id="num" name="num"
                   placeholder="請輸入外數字(0-2)）"
                   />
        </label>
        <a href="javascript:void(0);">開始</a>
    </div>

* {
            margin: 0;
        }
        .rotate {
            position: relative;
            margin: 0 auto;
            width: 400px;
            height: 400px;
            text-align: center;
            color: #fff;
            font-size: 50px;
            border-radius: 50%;
            background: antiquewhite;
        }
        .tn {
            transition: all 3s cubic-bezier(.11,.77,.2,.94);
            transform-origin: 50% 50%;
        }
        .out-circle {
            position: absolute;
            width: 300px;
            height: 300px;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
        }
        /*基礎旋轉的圓*/
        .out-circle  p {
            position: absolute;
            display: block;
            margin: 0 auto;
            left: 0;
            right: 0;
            width: 30px;
            height: 30px;
            line-height: 30px;
            background: red;
            /*以本身的寬度的一半 爲 x，以父盒子的高度一半 爲 y， 做爲旋轉點。*/
            transform-origin: 15px 150px;
            border-radius: 50%;
            font-size: 16px;
        }
        .inner-circle {
            position: absolute;
            width: 200px;
            height: 200px;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
        }
        /*基礎旋轉的圓*/
        .inner-circle p {
            position: absolute;
            display: block;
            margin: 0 auto;
            left: 0;
            right: 0;
            width: 30px;
            height: 30px;
            line-height: 30px;
            background: #4eff00;
            transform-origin: 15px 100px;
            border-radius: 50%;
            font-size: 16px;
        }
        .p11 {
            transform: rotate(0deg);
        }
        .p12 {
            transform: rotate(60deg);
        }
        .p13 {
            transform: rotate(120deg);
        }
        .p14 {
            transform: rotate(180deg);
        }
        .p15 {
            transform: rotate(240deg);
        }
        .p16 {
            transform: rotate(300deg);
        }
        .p1 {
            transform: rotate(0deg);
        }
        .p2 {
            transform: rotate(120deg);
        }
        .p3 {

            transform: rotate(240deg);
        }
        a {
           padding: 2.5px 10px;
           background: #0ebeff;
           border-radius: 5px;
           color: #fff;
           text-decoration: none;
        }
     .start-game {
      position:absolute;
      top: 20px;
      left: 20px;
    }

(function () {
            let deg = 0;
            // 基礎角度
            let baseDeg = 120;
            let $input = $('#num');
            // 多少個旋轉點
            let blocks = 360 / baseDeg;
            let k = null;
            let flag =  false;
            const $rotate = $('.rotate');
            // 0 1 2
            $('a').on('click', function () {
                var num = $input.val();
                // 當前旋轉 位置
                var curLc = deg % 360 / 120;
                // 待旋轉的角度
                deg = deg + 4 * 360 + (2*blocks  - num - curLc) * baseDeg;
                if (flag === true) {
                    return false;
                }
                flag = true;
                clearInterval(k);
                k = null;
                $rotate.addClass('tn');
                $rotate.css({
                    'transform': `rotate(${deg}deg)`
                });
                // 監聽過渡結束效果！--沒加入兼容性
                $rotate.on('transitionend', function () {
                    flag = false;
                    $(this).removeClass('tn');
                    let timeK = null;
                    // 抽獎後 圓盤動旋轉
                    setTimeout(() => {
                        k = timeK = setInterval( () => {
                            var temDeg = deg.toString();
                            if (k !== timeK) {
                                clearInterval(timeK);
                                return false;
                            }
                            if ($rotate.hasClass('tn')) {
                                return false;
                            }
                            // 一下代碼 正則是爲了解決 js 小數點 計算 問題。
                            temDeg = (/\./).test(temDeg) ? temDeg.replace(/\.\d+/, function ($1) {
                                var result = $1.length === 2 ? `${$1.substr(1)}0`: `${$1.substr(1)}`;
                                return result
                            }) : `${temDeg}00`;
                            temDeg = parseInt(temDeg);
                            temDeg += 5;
                            temDeg = temDeg.toString().split('');
                            temDeg.splice(temDeg.length - 2, 0, '.');
                            temDeg = temDeg.join('');
                            deg = parseFloat(temDeg);
                            $(this).css({
                                'transform': `rotate(${deg}deg)`
                            });
                        }, 13)
                    }, 1000);

                });
            })
        })()

demo地址