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

本文主要是介绍前端三件套 | 综合练习：模拟抽奖活动，实现一个简单的随机抽取并显示三名获胜者，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

随机运行结果如下：

参考代码如下：

<!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 2const 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()用于向下取整。