实现成果

html 外围代码如下

 <div class="box">
        <div class="point">
            <img src="./img/point.png" alt="">
        </div>
        <div class="wrap">
        </div>
    </div>

css 外围代码如下

   .box {
            width: 400px;
            height: 400px;
            border: 1px solid #cccccc;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }

        .wrap {
            width: 300px;
            height: 300px;
            border: 1px solid #000;
            border-radius: 50%;
            position: relative;
            overflow: hidden;

        }

        .item {
            position: absolute;
            border-top: 1px solid red;
            width: 150px;
            left: 50%;
            top: 50%;
            transform: translate(-0%, -50%);
            transform-origin: left;
            right: 0;
            left: auto;
        }

        .point {
            position: absolute;
            z-index: 11;

        }

        .point img {width: 60px;}

        .prizeWrap {
            padding-top: 37px;
            position: absolute;
            left: 50%;
            top: -50%;
            transform: translate(-50%) rotate(313deg);
            transform-origin: center;
        }

js 外围代码如下

 initPrize('奖品 2', function (prizeObj) {alert(` 祝贺你抽中 ${prizeObj.name}`)
        location.reload()});
    /* 
    prizeList: 奖品列表
       result: 抽中的后果 
    */
    function initPrize(result = '奖品 4', callbck = function () { }, prizeList = [
        {name: '奖品 1'},
        {name: '奖品 2'},
        {name: '奖品 3'},
        {name: '奖品 4'},
    ]) {
        const circle = 3// 要旋转的圈数
        const during = 2// 旋转多久 2 代表 2 秒
        const wrap = document.querySelector('.wrap');
        wrap.style = ` transition: all ${during}s`
        let html = ``;
        const area = 360 / (prizeList.length)
        prizeList.forEach((item, index) => {
            html += `
             <div class="item" style="transform: translate(-0%, -50%) rotate(${area * (index + 1)}deg);">
                    <div class="prizeWrap">
                        ${item.name}
                    </div>
                </div>
            `
        });
        wrap.innerHTML = html
        document.querySelector('.point').addEventListener('click', function (e) {
            let prizeIndex = 0;// 对用后果在奖项列表的 index
            for (let i = 0; i < prizeList.length; i++) {const item = prizeList[i]
                if (item.name == result) {
                    prizeIndex = i;
                    break;
                }
            }
            let rotate = 360 * circle + ((prizeIndex + 2) * area) + area / 2;
            const style = wrap.getAttribute('style')
            const hasRotate = style && style.indexOf('-') != -1
            wrap.style.transform = `rotate(${hasRotate ? rotate : -rotate}deg)`
            setTimeout(function () {callbck(prizeList[prizeIndex])
            }, during * 1000)
        })
    }