摘要：自己很菜，不可否認(rèn)。所以上周日試試水，看看自己能否寫個(gè)圓盤抽獎(jiǎng)的。效果圖代碼外部圓內(nèi)部園請(qǐng)輸入外數(shù)字開(kāi)始基礎(chǔ)旋轉(zhuǎn)的圓以自己的寬度的一半為，以父盒子的高度一半為，作為旋轉(zhuǎn)點(diǎn)。

自己很菜，不可否認(rèn)。
所以上周日試試水，看看自己能否寫個(gè)圓盤抽獎(jiǎng)的demo。
// github L6zt
開(kāi)發(fā)思路

布局 css rotate 布局；

抽獎(jiǎng)過(guò)渡效果，采用css3 transition；

動(dòng)態(tài)計(jì)算抽獎(jiǎng)結(jié)束時(shí)的角度，賦值給待選擇的元素。

效果圖

代碼

    

        
        

            
1
            
2
            
3
        
         
        

            
a
            
b
            
c
            
d
            
e
            
f
        
    
    

        
            
        
        開(kāi)始
    

        * {
            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;
        }
        /*基礎(chǔ)旋轉(zhuǎn)的圓*/
        .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， 作為旋轉(zhuǎn)點(diǎn)。*/
            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;
        }
        /*基礎(chǔ)旋轉(zhuǎn)的圓*/
        .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;
            // 基礎(chǔ)角度
            let baseDeg = 120;
            let $input = $("#num");
            // 多少個(gè)旋轉(zhuǎn)點(diǎn)
            let blocks = 360 / baseDeg;
            let k = null;
            let flag =  false;
            const $rotate = $(".rotate");
            // 0 1 2
            $("a").on("click", function () {
                var num = $input.val();
                // 當(dāng)前旋轉(zhuǎn) 位置
                var curLc = deg % 360 / 120;
                // 待旋轉(zhuǎn)的角度
                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)`
                });
                // 監(jiān)聽(tīng)過(guò)渡結(jié)束效果！--沒(méi)加入兼容性
                $rotate.on("transitionend", function () {
                    flag = false;
                    $(this).removeClass("tn");
                    let timeK = null;
                    // 抽獎(jiǎng)后 圓盤動(dòng)旋轉(zhuǎn)
                    setTimeout(() => {
                        k = timeK = setInterval( () => {
                            var temDeg = deg.toString();
                            if (k !== timeK) {
                                clearInterval(timeK);
                                return false;
                            }
                            if ($rotate.hasClass("tn")) {
                                return false;
                            }
                            // 一下代碼 正則是為了解決 js 小數(shù)點(diǎn) 計(jì)算 問(wèn)題。
                            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地址