JS实现转盘抽奖

html部分：一个转盘，一张旋转图片一张指针图片：

<div class="box">
        <img src="img/turntable2.png" alt="抽奖" id="boxx">
        <div class="boxchild"><img src="img/pointer.png"></div>
    </div>

css：绝对定位指针和转盘位置

 * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 448px;
            height: 448px;
            border-radius: 50%;
            position: relative;
            margin: auto;

        }

        #boxx {
            width: 100%;
            height: 100%;
            transform-origin: center center;
            transform: rotate(0deg);
            /* transition: transform 5s; */

        }
        .boxchild {
            width: 174px;
            height: 228px;
            /* line-height: 448px; */
            position: absolute;
            top: 90px;
            left: 140px;
        }

        .boxchild img {
            width: 100%;
            height: 100%;
        }

JS部分：

//旋转函数
        function lins() {
            var box = document.getElementById("boxx");
            //获取使用setInterval获取随机旋转角度
            var timenum = setInterval(function () {
                //     //判断至少旋转三圈
                if (Math.floor(nums / 360) < 3) {
                    // 随机旋转度数
                    nums = Math.floor(Math.random() * 3600);
                }
                else {
                    //用setInterval每间隔15毫米转动
                    var timestart = setInterval(function () {
                        //每次转动1度;
                        i = i + 1;
                        box.style.transform = "rotate(" + i + "deg)";
                        //当转动到随机获取的度数时停止
                        if (i > nums) {
                            //初始化当前度数，并保持当前扇区位置
                            i = i % 360;
                            clearInterval(timestart);
                            //调用弹窗
                            windo();
                        }
                    }, 3)
                    clearInterval(timenum);
                }
            }, 15);
            //初始化随机数
            nums = 0;
            // console.log(nums);
        }

总结：

使用到两个setInterval分别 获取随机旋转的度数 和 设置旋转图片；

使用Math.floor(Math.random() * 3600)：

 

最终效果：