转盘抽奖-- 自己手撸

摘要：自己很菜，不可否认。所以上周日试试水，看看自己能否写个圆盘抽奖的。效果图代码外部圆内部园请输入外数字开始基础旋转的圆以自己的宽度的一半为，以父盒子的高度一半为，作为旋转点。

自己很菜，不可否认。
所以上周日试试水，看看自己能否写个圆盘抽奖的demo。
// github L6zt
开发思路

布局 css rotate 布局；

抽奖过渡效果，采用css3 transition；

动态计算抽奖结束时的角度，赋值给待选择的元素。

效果图

代码

    

        
        

            
1
            
2
            
3
        
         
        

            
a
            
b
            
c
            
d
            
e
            
f
        
    
    

        
            
        
        开始
    

        * {
            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地址