HTML+CSS+JavaScript：随机抽奖案例

最新推荐文章于 2024-10-12 09:16:29 发布

早八睡不醒午觉睡不够的程序猿

最新推荐文章于 2024-10-12 09:16:29 发布

阅读量1.4k

点赞数 2

本文链接：https://blog.csdn.net/lbcbjtlhmjq/article/details/132034759

版权

一、需求

在时代少年团的七个人中，随机抽取一个人获得一等奖，再抽取一个获二等奖，再抽取一个获三等奖。注意同一个人不能同时获得多个奖项

如下图所示

二、代码素材

以下是缺失JS部分的代码，感兴趣的小伙伴可以先自己试着写一写

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>年会抽奖</title>
    <style>
        .box {
            margin: 50px auto;
            width: 1024px;
            height: 576px;
            background-image: url(./photo15.jpg);
            color: white;
            text-align: center;
        }

        .box .duiqi {
            padding-top: 40px;
        }

        .box h2 {
            font-size: 50px;
        }

        .box h3 {
            font-size: 40px;
        }

        .box h4 {
            font-size: 30px;
        }
    </style>
</head>

<body>
    <div class="box">
        <h2 class="duiqi">年会抽奖</h2>
        <h2 class="duiqi">一等奖：<span>xxx</span></h2>
        <h3 class="duiqi">二等奖：<span>xxx</span></h3>
        <h4 class="duiqi">三等奖：<span>xxx</span></h4>
    </div>
    <script>
    const arr = ['马嘉祺', '丁程鑫', '宋亚轩', '严浩翔', '刘耀文', '贺峻霖', '张真源']
        
    </script>
</body>

</html>

还有图片素材我也放这了，有需要的小伙伴自取哈

注意一定要放图片，因为文字颜色是白色的，不放图片你应该能想象渲染出的效果是什么样的吧

注意一定要修改代码中的图片路径，不修改路径你应该能想象渲染出的效果是什么样的吧

三、算法思路

1、封装随机数函数，用于获得一个 N 到 M 之间的随机整数，注意左右都是闭区间：[N,M]

2、获取相关元素（一等奖、二等奖、三等奖的获奖人信息）

3、随机抽取时代少年团数组中的元素（即人名），将抽取到的人名填入一等奖、二等奖、三等奖的获奖人信息。注意抽取一个元素，就需要在数组中删除这个元素，因为同一个人不能同时获得多个奖项

四、完整代码

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>年会抽奖</title>
    <style>
        .box {
            margin: 50px auto;
            width: 1024px;
            height: 576px;
            background-image: url(./photo15.jpg);
            color: white;
            text-align: center;
        }

        .box .duiqi {
            padding-top: 40px;
        }

        .box h2 {
            font-size: 50px;
        }

        .box h3 {
            font-size: 40px;
        }

        .box h4 {
            font-size: 30px;
        }
    </style>
</head>

<body>
    <div class="box">
        <h2 class="duiqi">年会抽奖</h2>
        <h2 class="duiqi">一等奖：<span>xxx</span></h2>
        <h3 class="duiqi">二等奖：<span>xxx</span></h3>
        <h4 class="duiqi">三等奖：<span>xxx</span></h4>
    </div>
    <script>
        const arr = ['马嘉祺', '丁程鑫', '宋亚轩', '严浩翔', '刘耀文', '贺峻霖', '张真源']
        const price = []
        price[0] = document.querySelector('h2 span')
        price[1] = document.querySelector('h3 span')
        price[2] = document.querySelector('h4 span')

        //函数功能，返回 N 到 M 之间的随机整数，[N,M]
        function random(N, M) {
            return Math.floor(Math.random() * (M - N + 1) + N)
        }

        for (let i = 0; i < price.length; i++) {
            const rand = random(0, 6 - i)
            price[i].innerHTML = arr[rand]
            arr.splice(rand, 1)
        }
     </script>
</body>

</html>