SOURCE

let box = document.querySelector('.box');
let text = document.querySelectorAll('.box .text');
let textList = ["黄焖鸡","麻辣烫","蛋炒饭","烧烤","火锅","热干面","牛排","螺蛳粉"];
for(let i = 0; i < textList.length; i++) {
    text[i].innerHTML  = textList[i];
}
let isFlag = true;
document.querySelector('.circle').onclick = function() {
    if(isFlag) {
        let random = parseInt(Math.random()*8);
        switch(random) {
            case 0: 
                run(22.5);
                break;
            case 1: 
                run(66.5);
                break;
            case 2: 
                run(112.5);
                break;
            case 3: 
                run(157.5);
                break;
            case 4: 
                run(338.5);
                break;
            case 5: 
                run(294.5);
                break;
            case 6: 
                run(247.5);
                break;
            case 7: 
                run(201.5);
                break;
        }
    }
}
function run (angle) {
    isFlag = false;
    let begin = 0;
    let timer = null;
    let basic = 1800;
    timer = setInterval(function() {
        if(begin > (basic+angle)) {
            isFlag = true;
            clearInterval(timer);
        }
        box.style.transform = 'rotate('+begin+'deg)';
        begin += Math.ceil(basic+angle-begin)*0.1; 
    },70)
}

<div class="outside">
    <div class="box">
        <div class="left">
            <div class="one"><span class="text"></span></div>
            <div class="two"><span class="text"></span></div>
            <div class="three"><span class="text"></span></div>
            <div class="four"><span class="text"></span></div>
        </div>
        <div class="right">
            <div class="one"><span class="text"></span></div>
            <div class="two"><span class="text"></span></div>
            <div class="three"><span class="text"></span></div>
            <div class="four"><span class="text"></span></div>
        </div>
    </div>
    <div class="circle">开始</div>
</div>

body {
    display: flex;
    justify-content: center;
    align-items: center;
}
.outside {
    width: 300px;
    height: 300px;
    position: relative;
    border-radius: 50%;
    background: #eee;
}
.box {
    width: 300px;
    height: 300px;
    overflow: hidden;
    border-radius: 50%;
    transform: rotate(22.5deg)
}
.left {
    width: 150px;
    height: 300px;
    left: 0;
    position: absolute;
    overflow: hidden;
    text-align: center;
}
.right {
    width: 150px;
    height: 300px;
    right: 0;
    position: absolute;
    overflow: hidden;
    text-align: center;
}
.left div {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    transform-origin: right center;
}
.left .one {
    background: #6896fa;
}
.left .two {
    background: #9af09a;
    transform: rotate(-45deg);
}
.left .three {
    background: #fa3f3f;
    transform: rotate(-90deg);
}
.left .four {
    background: #74ebf3;
    transform: rotate(-135deg);
}
.right div {
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    position: absolute;
    transform-origin: left center;
}
.right .one {
    background: #f8f896;
}
.right .two {
    background: #f830f8;
    transform: rotate(45deg);
}
.right .three {
    background: #ffbc65;
    transform: rotate(90deg);
}
.right .four {
    background: #ff8f0f;
    transform: rotate(135deg);
}
.left .text {
    position: absolute;
    top: 30px;
    left: 50%;
    transform: rotate(-22.5deg);
}
.right .text {
    position: absolute;
    top: 30px;
    left: 15%;
    transform: rotate(22.5deg);
}
.circle {
    width: 100px;
    height: 100px;
    background: #fff;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
    line-height: 100px;
    cursor: pointer;
    user-select: none;
}
.circle::after {
    width: 0;
    height: 0;
    border: 40px solid #fff;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 0px solid transparent;
    position: absolute;
    content: '';
    top: -35px;
    left: calc(50% - 10px);
    z-index: -1;
}