旋转抽奖

本文链接： https://blog.csdn.net/qq_37473645/article/details/102766363

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>转盘</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="box">
        <span>选择中奖的奖品：</span>
        <select id="choice">

        </select>
    </div>
    <div id="turntable">
        <div></div>
        <div></div>
        <div></div>

        <div></div>
        <div id="button">开始</div>
        <div></div>

        <div></div>
        <div></div>
        <div></div>
    </div>
    <script type="text/javascript" src="main.js" charset="UTF-8"></script>
</body>
</html>

style.css

*{
    margin: 0;
    padding: 0;
}
.box {
    text-align: center;
    line-height: 50px;
}
#turntable {
    margin: auto;
    display: flex;
    width: 300px;
    height: 300px;
    flex-wrap: wrap;
}
#turntable>div {
    width: 100px;
    height: 100px;
    box-sizing: border-box;
    border: 2px solid red;
    text-align: center;
    line-height: 100px;
}
#button {
    background: blue;
    cursor: pointer;
}
#button:active {
    background: yellow;
}

main.js

// 从后台接收到的数据
// 奖品列表
let list = [
        {
            "id": "101",
            "name": "奖品1"
        },
        {
            "id": "102",
            "name": "奖品2"
        },
        {
            "id": "103",
            "name": "奖品3"
        },
        {
            "id": "104",
            "name": "奖品4"
        },
        {
            "id": "105",
            "name": "奖品5"
        },
        {
            "id": "106",
            "name": "奖品6"
        },
        {
            "id": "107",
            "name": "奖品7"
        },
        {
            "id": "",
            "name": "未中奖"
        }
    ]
// 是否中奖
let prize = {
    "prizeId": "107",
    "name": "奖品7"
}
// 填入奖品
function drawPrize(turntable, list, choice) {
    let len = turntable.length;
    // 创建文档碎片
    var oFragmeng = document.createDocumentFragment();
    for (let i = 0,j = 0; i < len; i++) {
        if (i === Math.floor(len / 2)) {
            continue;
        }
        turntable[i].innerText = list[j].name;
        turntable[i].id = list[j].id;
        let op = document.createElement("option");
        op.value = list[j].id;
        op.textContent = list[j].name;
        if (prize.prizeId === list[j].id) {
            op.selected = "selected";
        }
        oFragmeng.appendChild(op);
        j++;
    }
    choice.appendChild(oFragmeng);
}
// 奖品位置
function prizeIndex(list, prize) {
    let index = 8, sequence = [1,2,3,0,4,7,6,5];
    for (let i = 0; i < list.length; i++) {
        if (list[i].id + '' === prize.prizeId + '') {
            index = sequence[i];
        }
    }
    return index;
}
// 抽奖动态
function animation(el) {
    let sequence = [0,1,2,5,8,7,6,3], slide = [7,6,3];
    let index = 8, interval = 16;
    function slideChange() {
        if (index > 7) {
            index = 0;
        }
        slide.shift();
        slide.push(sequence[index]);
        sequence.forEach(key => {
            el[key].style.backgroundColor = 'white';
        });
        slide.forEach(key => {
            el[key].style.backgroundColor = 'yellow';
        });
        index++;
    }
    let time = setInterval(() => {
        slideChange();
        interval--;
        if (interval === 0) {
            clearInterval(time);
            let count = prizeIndex(list, prize) + 8;
            let slow = setInterval(() => {
                if (count === 0) {
                    slide.forEach(key => {
                        el[key].style.backgroundColor = 'white';
                    });
                    el[slide[slide.length - 1]].style.backgroundColor = 'yellow';
                    clearInterval(slow);
                    // 如果中奖了弹出中奖弹框，未中奖弹出未中奖的弹框
                } else {
                    slideChange();
                }
                count--;
            }, 200)
        }
    }, 100);
}


let turntable = document.getElementById("turntable").getElementsByTagName('div');
let choice = document.getElementById("choice");
let button = document.getElementById("button");
drawPrize(turntable, list, choice);
button.onclick = function() {
    animation(turntable);
}
choice.onchange = function() {
    prize.prizeId = this.value;
    let index = this.selectedIndex;
    prize.name = this[index].textContent;
}

截图

猜你喜欢