本文主要是介绍前端三件套 | 综合练习：模拟抽奖活动，实现一个简单的随机抽取并显示三名获胜者，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
随机运行结果如下：
参考代码如下：
<!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()用于向下取整。
3.querySelector()用于选择页面上的元素。
4.innerHTML用于获取或设置元素的HTML内容。
5.splice()用于从数组中删除元素。
DOM操作：
1.通过JavaScript来修改HTML元素的内容。
理解这段代码的关键在于理解以下几个方面：
❤：personArr数组存储了所有可能的获奖者姓名。初始化时，这个数组包含三个名字。
❤：Math.random()生成一个0到1之间的随机小数，Math.floor()将这个小数向下取整为整数
❤：personArr.length将这个整数乘以数组长度，得到一个0到数组长度减1之间的随机整数。
❤：document.querySelector()方法用于选择具有指定选择器的第一个元素。在这里，它分别用于选择.one、.two和.three类的span元素。
❤：personArr.splice(index, count)方法用于从数组中删除指定索引处的count个元素，并返回被删除的元素数组。这样可以确保每个获奖者只被选中一次，并且在被选中后从候选名单中移除。
❤：最后，更新span元素的innerHTML属性，将其设置为对应的获奖者姓名，从而在网页上显示最终结果。
这篇关于前端三件套 | 综合练习：模拟抽奖活动，实现一个简单的随机抽取并显示三名获胜者的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
