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

随机运行结果如下:


参考代码如下:

<!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属性,将其设置为对应的获奖者姓名,从而在网页上显示最终结果。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/548725.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Flink源码解析(1)TM启动

网络传输模型 首先在看之前,回顾一下akka模型: Flink通讯模型—Akka与Actor模型-CSDN博客 注:ActorRef就是actor的引用,封装好了actor 下面是jm和tm在通讯上的概念图: RpcGateway 不理解网关的作用,可以先移步看这里:网关_百度百科 (baidu.com) 用于定义RPC协议,是…

深入探索C与C++的混合编程

实现混合编程的技术细节 混合使用C和C可能由多种原因驱动。一方面&#xff0c;现有的大量优秀C语言库为特定任务提供了高效的解决方案&#xff0c;将这些库直接应用于C项目中可以节省大量的开发时间和成本。另一方面&#xff0c;C的高级特性如类、模板和异常处理等&#xff0c;…

函数-Python

师从黑马程序员 函数初体验 str1"asdf" str2"qewrew" str3"rtyuio" def my_len(data):count0for i in data:count1print(f"字符串{data}的长度是{count}")my_len(str1) my_len(str2) my_len(str3) 函数的定义 函数的调用 函数名&a…

零延迟轻量级网站指纹防御

文章信息 论文题目&#xff1a;Zero-delay Lightweight Defenses against Website Fingerprinting 期刊&#xff08;会议&#xff09;&#xff1a; 29th USENIX Security Symposium 时间&#xff1a;2020 级别&#xff1a;CCF A 文章链接&#xff1a;https://www.usenix.org/s…

【数据结构与算法】:非递归实现快速排序、归并排序

&#x1f525;个人主页&#xff1a; Quitecoder &#x1f525;专栏&#xff1a;数据结构与算法 上篇文章我们详细讲解了递归版本的快速排序&#xff0c;本篇我们来探究非递归实现快速排序和归并排序 目录 1.非递归实现快速排序1.1 提取单趟排序1.2 用栈实现的具体思路1.3 代码…

数据结构:图的拓扑排序与关键路径

目录 一、拓扑排序 1.1、算法的基本步骤 1.2、算法实现 1.4、习题思考 1.5、DFS生成逆拓扑序 一、拓扑排序 AOV网:在 有向图中&#xff0c; 顶点表示活动&#xff08;或任务&#xff09;&#xff0c; 有向边表示活动&#xff08;或任务&#xff09;间的先后关系&#xff0…

电脑msvcp140_1.dll丢失的解决方法,总结5种可靠的方法

在日常使用电脑的过程中&#xff0c;我们可能会遇到一些错误提示&#xff0c;其中之一就是“msvcp1401.dll丢失”。这个DLL文件是Microsoft Visual C Redistributable Package的一部分&#xff0c;对于许多基于Windows的应用程序来说至关重要。这个错误通常会导致某些应用程序无…

静态综合实验

一&#xff0c;1.搭建拓扑结构并启动。 2.根据题意得该图需要14个网段&#xff0c;根据192.168.1.0/24划分子网段&#xff0c;如下&#xff1a; 划分完如图所示&#xff1a; 二、配置IP地址 R1路由器&#xff1a; 1.进入系统视图并改名. 2.接口配置IP地址&#xff1a…

代码随想录算法训练营第二十七天(第二十六天休息)|40.组合总和II

40.组合总和II 题目 给定一个数组 candidates 和一个目标数 target &#xff0c;找出 candidates 中所有可以使数字和为 target 的组合。 candidates 中的每个数字在每个组合中只能使用一次。 说明&#xff1a; 所有数字&#xff08;包括目标数&#xff09;都是正整数。解集…

【Unity】CatlikeCoding SRP

Unity 自定义渲染管线 提示&#xff1a;基于CatlikeCoding SRP系列教程学习 学习链接&#xff1a;SRP 个人测试: Demo 相关记录以后有时间再更&#xff1a;

vivado 物理优化、物理端口设计

物理优化消息 提示&#xff1a;物理优化报告为优化处理的每个网络&#xff0c;以及优化摘要执行&#xff08;如有&#xff09;。如下图所示&#xff0c;在物理优化结束时提供了一个摘要显示了每个优化阶段的统计数据及其对设计性能的影响。这突出显示了对改进WNS最有效的优化类…

解决nginx报错nginx: [emerg] unknown log format main in 的方法

目录 一、故障描述1&#xff1a; 重启nginx是出现了如下错误 解决办法 二、故障描述2&#xff1a; 解决办法&#xff1a; 三、nginx介绍​ 四、nginx原理 五、nginx.conf配置文件 六、nginx负载均衡 七、正向代理、反向代理 一、故障描述1&#xff1a; 在添加Nginx的…