JavaScript简单实现随机抽奖案例

最新推荐文章于 2024-05-14 07:32:21 发布

入梦风行

最新推荐文章于 2024-05-14 07:32:21 发布

阅读量3.2k

点赞数 9

分类专栏： JavaScript学习文章标签： javascript 前端 html 开发语言

本文链接：https://blog.csdn.net/qq_62107003/article/details/130515658

版权

JavaScript学习专栏收录该内容

7 篇文章 0 订阅

订阅专栏

演示效果

JavaScript相关代码

<script>
    const personArr = ['周杰伦', '刘德华', '周星驰', '黎明', '张学友']   // 参与人员名单
    const prizeArr = ['first-prize', 'second-prize', 'third-prize']   // 奖项设置

    function getRaffleList(personArr = [], prizeArr = []) {
        let random = 0   // 随机整数
        const raffleList = new Array(prizeArr.length)    // 获奖人员名单

        // 产生获奖名单
        for (let i = 0; i < prizeArr.length; i++) {
            random = Math.floor(Math.random() * personArr.length)  // 产生一个随机整数，范围[0,personArr.length-1]
            raffleList[i] = { prize: prizeArr[i], uname: personArr[random] }  // 收集获奖人员名单  
            personArr.splice(random, 1)   // 删除已抽中人员
        }
        return raffleList
    }

    const raffleList = getRaffleList(personArr, prizeArr)   // 调用getRaffleList(),获取获奖人员名单
    // 进行数据渲染
    for (let i = 0; i < raffleList.length; i++) {
        const span = document.querySelector(`#${raffleList[i].prize}`)  // 获取span标签元素对象
        span.innerHTML = `${raffleList[i].uname}`
    }
</script>

HTML相关代码

<div>
    <h3>获奖名单如下</h3>
    <ul class="raffle-list">
        <li>一等奖: <span id="first-prize"></span></li>
        <li>二等奖: <span id="second-prize"></span></li>
        <li>三等奖: <span id="third-prize"></span></li>
    </ul>
</div>

完整代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta uname="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li {
            list-style: none
        }
    </style>
</head>

<body>
    <div>
        <h3>获奖名单如下</h3>
        <ul class="raffle-list">
            <li>一等奖: <span id="first-prize"></span></li>
            <li>二等奖: <span id="second-prize"></span></li>
            <li>三等奖: <span id="third-prize"></span></li>
        </ul>
    </div>

    <script>
        const personArr = ['周杰伦', '刘德华', '周星驰', '黎明', '张学友']   // 参与人员名单
        const prizeArr = ['first-prize', 'second-prize', 'third-prize']   // 奖项设置

        function getRaffleList(personArr = [], prizeArr = []) {
            let random = 0   // 随机整数
            const raffleList = new Array(prizeArr.length)    // 获奖人员名单

            // 产生获奖名单
            for (let i = 0; i < prizeArr.length; i++) {
                random = Math.floor(Math.random() * personArr.length)  // 产生一个随机整数，范围[0,personArr.length-1]
                raffleList[i] = { prize: prizeArr[i], uname: personArr[random] }  // 收集获奖人员名单  
                personArr.splice(random, 1)   // 删除已抽中人员
            }
            return raffleList
        }

        const raffleList = getRaffleList(personArr, prizeArr)   // 调用getRaffleList(),获取获奖人员名单
        // 进行数据渲染
        for (let i = 0; i < raffleList.length; i++) {
            const span = document.querySelector(`#${raffleList[i].prize}`)  // 获取span标签元素对象
            span.innerHTML = `${raffleList[i].uname}`
        }
    </script>
</body>

</html>