實現可配置的自定義轉盤組件

html代碼：

<div class="turntableMain border-shadow text-center">
    <input type="number" class="turntableNum" placeholder="請輸入轉盤格數(≥3)" value="3" />
    <button class="btn btn-default turn-btn" data-type="pan">轉盤轉動</button>
    <button class="btn btn-default turn-btn" data-type="arrow">指針轉動</button>
    <button class="btn btn-default setTurntable">生成轉盤</button>

    <div class="turntableCon">
        <ul class="turntable">
            <li class="slice"></li>
        </ul>
        <div class="turntableArrow"></div>
    </div>

    <div class="alert">
        <div class="alertBox text-center">
            <p class="prizeText"></p>
            <button class="btn btn-default initTurntable">確定</button>
        </div>
    </div>
</div>

css代碼：

.turntableMain {
    padding: 5em 0;
    text-align: center;
}

.turntableCon {
    position: relative;
    margin: 5rem auto;
    width: 37em;
    height: 37em;
}

.turntable {
    position: relative;
    margin: 5rem auto;
    width: 37em;
    height: 37em;
    border-radius: 100%;
    list-style: none;
    overflow: hidden;
    transform: rotate(0deg);
    background: #ddd;
    display: block;
}

.turntable::after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    background-position: center -6.5em;
    opacity: 0;
}

.slice {
    overflow: hidden;
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    transform-origin: 0% 100%;
    transform: rotate(0deg) skewY(0deg);
    font-size: 16px;
    color: #333;
    border: 1px solid #fff;
}

.slice span {
    position: absolute;
    bottom: 4em;
    left: 1em;
    font-weight: bold;
    background: #fff;
    padding: 5px;
    border-radius: 10px;
}

.turntableArrow {
    cursor: pointer;
    position: absolute;
    width: 6em;
    height: 6em;
    top: 50%;
    left: 50%;
    margin-top: -3em;
    margin-left: -8px;
    background-size: 100% 100%;
    transform-origin: 50% 50%;
    background: #ffffff;
    border-radius: 50%;
}

.turntableArrow::after {
    content: '';
    display: block;
    position: absolute;
    border-width: 0 20px 40px;
    border-style: solid;
    border-color: transparent transparent #ffffff;
    top: -33px;
    left: 50%;
    margin-left: -20px;
}

.alert {
    display: none;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .6);
    position: fixed;
    z-index: 10;
    top: 0;
    left: 0;
}

.alertBox {
    width: 20em;
    height: 10em;
    background: #fff;
    color: #000;
    margin: 25em auto 0;
    box-sizing: border-box;
    padding: 3em 0;
}

js腳本（依賴Jquery，可以改原生實現）：

$(() => {
    var $turntable = $('.turntable');
    var $turntableNum = $('.turntableNum');
    var $turntableBtn = $('.setTurntable');
    var $turntableArrow = $('.turntableArrow');
    var $turnBtn = $('.btn-turn');
    var $alert = $('.alert');
    var $sureBtn = $('.initTurntable');
    var degObg = {};
    var $style = $('.turntableStyle');
    var turnType = 'pan';
    var btnFlag = false;

    function color16() { //十六進制顏色隨機
        var r = Math.floor(Math.random() * 256);
        var g = Math.floor(Math.random() * 256);
        var b = Math.floor(Math.random() * 256);
        var color = '#' + r.toString(16) + g.toString(16) + b.toString(16);
        return color;
    }

    function turn(type) {
        turnType = type;
    }

    $turnBtn.click((e) => {
        var $this = $(e.currentTarget);
        var btnType = $this.attr('data-type');

        turn(btnType);
    });

    $turntableBtn.click(() => {
        var turntableNum = $turntableNum.val();

        if (turntableNum < 3) {
            alert('建議轉盤格數≥3');
            return;
        }

        $turntable.html('');
        var turntableHtml = '';

        for (var i = 0; i < turntableNum; i++) {
            var rotateDeg = i * (360 / turntableNum);
            var skewDeg = 360 / turntableNum - 90;
            var bgColor = color16();
            degObg[i] = rotateDeg;
            turntableHtml += `
                <li class="slice slice-${i}" 
                style="transform: rotate(${rotateDeg}deg) skewY(${skewDeg}deg); background: ${bgColor}">
                <span style="transform: rotate(0deg) skewY(${-skewDeg}deg)">商品${i + 1}</span></li>`
        }

        $turntable.html(turntableHtml);
    });

    $turntableArrow.click(() => {
        var turntableNum = $turntableNum.val();
        var turnTime = 0;

        if (turntableNum < 3) {
            alert('建議轉盤格數≥3');
            return;
        }

        if (btnFlag) {
            return;
        }
        btnFlag = true;

        if (turnType === 'pan') {
            var prizeId = parseInt(Math.random() * turntableNum);
            var rotateFinal = 360 * 5 + (360 - degObg[prizeId]) - 180 / turntableNum;
            turnTime = 2 / 3 * turntableNum;

            $turntable.css({
                transition: `all ${turnTime}s ease-out 0s`,
                transform: `rotate(${rotateFinal}deg)`
            });
        } else {
            var prizeId = parseInt(Math.random() * turntableNum);
            var rotateFinal = 360 * 5 + degObg[prizeId] + 180 / turntableNum;
            turnTime = 2 / 8 * turntableNum < 2 ? 2 : 2 / 8 * turntableNum;
            $turntableArrow.css({
                transition: `all ${turnTime}s ease-out 0s`,
                transform: `rotate(${rotateFinal}deg)`
            });
        }

        setTimeout(() => {
            $alert.find('.prizeText').text(`恭喜您抽中商品${prizeId + 1}`);
            $alert.show();
        }, turnTime * 1000 + 500);
    });

    $sureBtn.click(() => {
        btnFlag = false;
        $alert.hide();
        $turntable.css({
            transition: `all 0s ease-out 0s`,
            transform: `rotate(0deg)`
        });
        $turntableArrow.css({
            transition: `all 0s ease-out 0s`,
            transform: `rotate(0deg)`
        });
    });

    $turntableBtn.click();
});

以上可以實現一個自定義轉盤格數（建議大於等於3、轉盤或指針轉動、並獲取停止時的指向），效果如下：

轉盤轉動 指針轉動 生成轉盤

• 1

 

 

確定