实现成果

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)        })    }