前端三件套 | 综合练习：模拟抽奖活动，实现一个简单的随机抽取并显示三名获胜者

一只漫漫

已于 2024-03-14 20:18:41 修改

阅读量593

点赞数 16

分类专栏： web前端基础文章标签：前端

于 2024-03-14 20:06:25 首次发布

本文链接：https://blog.csdn.net/ZM20170703/article/details/136720245

版权

web前端基础专栏收录该内容

8 篇文章 0 订阅

订阅专栏

该篇文章展示了如何使用HTML、CSS和JavaScript创建一个动态网页，随机选择并显示比赛的前三名获奖者。通过JavaScript生成随机数，从预定义的获奖者数组中选取，并使用CSS进行样式布局和DOM操作更新网页内容。

摘要由CSDN通过智能技术生成

随机运行结果如下：

参考代码如下：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            margin: 0 auto;
            width: 840px;
            height: 615px;
            background: url(./pic_jiangzhuang.png) no-repeat center / cover;
            padding: 100px 250px;
            block-size: border-box;
            /* 设置为怪异盒：设定的宽高是整个盒子的大小 内边距这些会压缩内容大小 */
            /* 使得里面的内容显示在背景图中央 */
            display: flex;
            /* 使用flex布局 */
            flex-wrap: wrap;
            justify-content: center;
            /* 水平居中 */
            align-items: center;
            /* 垂直居中 */
            box-sizing: border-box;
            /* 确保宽度和高度包括内边距和边框  */
            position: relative;
            /* 父相子绝 实现内容定位放置 */

        }

        .box b {
            display: inline-block;
            position: absolute;
            top: 10rem;
            left: 19rem;
        }

        .box h1 {
            position: absolute;
            top: 16rem;
        }

        .box h3 {
            position: absolute;
            top: 20rem;
        }

        .box h5 {
            position: absolute;
            top: 23rem;
        }
    </style>
</head>

<body>
    <div class="box">
        <b>305最佳美女决赛 让我们拭目以待</b>
        <h1>第一名:
            <span class="one">???</span>
        </h1>
        <h3>第二名:
            <span class="two">???</span>
        </h3>
        <h5>第三名：
            <span class="three">???</span>
        </h5>
    </div>
    <script>
        // 1.声明数组 用于后续随机抽取 名字下标对应 0 1 2
        const personArr = ['ZM', 'WZY', 'LMF']
        // 2.先抽一等奖 抽完一个删一个 避免重复
        // 2.1得到随机数 random是一个得到的随机数组下标
        const random1 = Math.floor(Math.random() * personArr.length)
        // 2.2 获取one元素
        const one = document.querySelector('.one')
        // 2.3 修改这个元素的值 personArr[random]为数组里的某个属性
        one.innerHTML = personArr[random1]
        // 2.4 抽出一个 删一个 避免重复
        personArr.splice(random1, 1)// 数组的删除

        // 3.抽二等奖
        // 3.1得到随机数 random1是一个得到的随机数组下标
        const random2 = Math.floor(Math.random() * personArr.length)
        // 3.2 获取two元素
        const two = document.querySelector('.two')
        // 3.3 修改这个元素的值 personArr[random]为数组里的某个属性
        two.innerHTML = personArr[random2]
        // 3.4 抽出一个 删一个 避免重复
        personArr.splice(random2, 1)// 数组的删除

        // 4.抽三等奖
        // 4.1得到随机数 random1是一个得到的随机数组下标
        const random3 = Math.floor(Math.random() * personArr.length)
        // 4.2 获取three元素
        const three = document.querySelector('.three')
        // 4.3 修改这个元素的值 personArr[random]为数组里的某个属性
        three.innerHTML = personArr[random3]
        // 4.4 抽出一个 删一个 避免重复
        personArr.splice(random3, 1)// 数组的删除


    </script>
</body>

</html>

考察知识点如下：

HTML标签和元素：

1.使用<div>、<b>、<h1>、<h3>、<h5>等HTML标签来构建页面结构。

CSS样式：

1.background属性用于设置背景图片。

2.display: flex;用于创建弹性布局容器。

3.justify-content和align-items用于水平和垂直居中容器内的元素。

4.position: absolute;用于绝对定位元素。

5.box-sizing: border-box;确保元素的宽度和高度包括内边距和边框。

JavaScript基础：

1.Math.random()用于生成随机数。

2.Math.floor()用于向下取整。