SOURCE

const box = document.querySelector('.box')

let lock, rorating

let prizeList = [
    {},
    {},
    {},
    {},
    {},
    {},
    {},
    {},
    {},
    {},
    {},
]
const createPrizeList = (list) => {
    list.forEach((item, index) => {
        let div = document.createElement('div')
        div.classList.add('prize-item')
        div.textContent = index
        box.appendChild(div)
    })
}
function init(list) {
    lock = false
    rorating = false
    createPrizeList(list)
}
init(prizeList)

function start() {
    let index = Math.floor(Math.random() * prizeList.length)
    let animateTime = 3

    let num = index * 110 + 55

    box.style.transition = `all ${animateTime}s cubic-bezier(0.250, 0.460, 0.455, 0.995)`
    box.style.transform = `translateX(-${num}px)`

    setTimeout(() => {
        lock = false
        rorating = false
    }, animateTime * 1000)

}

let startBtn = document.getElementById('startBtn')
startBtn.onclick = function () {
    if (lock) return
    box.style.transition = 'none'
    box.style.transform = `translateX(0px)`
    setTimeout(() => {
        lock = true
        rorating = true
        start()
    },0)

}

<div class="container">
    <div class="box"></div>
    <div class="line"></div>
</div>
<button id="startBtn">开始</button>

.container{
    widows: 100%;
    height: 100px;
    padding: 10px;
    border: 1px solid red;
    overflow: hidden;
    position: relative;
}
.line{
    position: absolute;
    left: 50%;
    top: 0;
    height: 100%;
    width: 2px;
    background-color: red;
}

.box{
    width: fit-content;
    display: flex;
    align-items: center;
    position: absolute;
    left: 50%;
}
.prize-item{
    width: 100px;
    height: 100px;
    background-color: skyblue;
    margin: 0 5px;
    text-align: center;
    line-height: 100px;
    font-size: 18px;
}