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

一、需求

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

如下图所示

 

二、代码素材

以下是缺失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>

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

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

相关文章

oracle数据库dbLink的使用

Oracle的数据库链路&#xff08;dbLink&#xff09;是一种允许在两个不同的数据库实例之间进行通信和数据交换的功能。它可以让你在一个数据库中访问另一个数据库的对象和数据&#xff0c;就像它们属于同一个数据库一样。 创建一个link: CREATE public DATABASE LINK link_sco…

计算机网络用户接入层设计

用户接入层为用户提供访问核心网络的能力&#xff0c; 为用户提供共享/交换的带宽分配&#xff0c;按照业主要求,并考虑到端口密度的要求以及 设备的性能价格比,建议选用 Catalyst 3524XL和 Catalyst 3548XL 工作组交换 机&#xff0c;分别放置于配线间中。如同一配线间需两台以…

PyCharm安装使用2023年教程,PyCharm与现流行所有编辑器对比。

与PyCharm类似的功能和特性的集成开发环境&#xff08;IDE&#xff09;和代码编辑器有以下几种&#xff1a; Visual Studio Code&#xff08;VS Code&#xff09;&#xff1a;由Microsoft开发&#xff0c;VS Code是一个高度可定制和可扩展的代码编辑器。它支持多种编程语言&am…

深入了解Redis-实战篇-短信登录

深入了解Redis-实战篇-短信登录 一、故事背景二、知识点主要构成2.1、短信登录2.1.1、生成随机短信验证码引入maven依赖生成验证码 2.1.2、实现登录校验拦截器2.1.3、基于Redis实现短信登录2.1.3.1、发送验证码时存入Redis2.1.3.2、登录时校验验证码 2.1.4、解决状态登录刷新的…

【phaser微信抖音小游戏开发006】给文本增加点击事件

新建st006&#xff0c;为文本增加点击事件。 我们加了一个计数的count&#xff0c;点击一次增加一下&#xff0c;并显示到屏幕上去。 效果如下图&#xff1a; 其它的对象以此类推即可&#xff0c;先置inputEnable为true,然后再增加一个inputDown事件即可。

Halcon学习之一维测量实战之测量矩形(一)

一、采集图像 (1)测量充电器 测量充电器的引脚,然后每次旋转充电器,让测量矩形都跟着它转,这就是定位+测量, (2)测量钥匙 (3)测量瓶盖 我们后面还会涉及到拟合的问

无涯教程-jQuery - css( properties )方法函数

css(properties)方法将键/值对象设置为所有匹配元素的样式属性。 css( properties ) - 语法 selector.css( properties ) 上面的语法可以写成如下- selector.css( {key1:val1, key2:val2....keyN:valN}) 这是此方法使用的所有参数的描述- key:value - 设置为样式属…

自动驾驶TPM技术杂谈 ———— 汽车转向系统术语和定义

文章目录 术语和定义基本术语转向系统转向参数转向系统形式转向车轮布置形式转向传动形式 功能安全术语 技术要求一般要求失效规定 试验方法汽车试验汽车转向系统完好时转向操纵力的测量汽车转向系统出现故障时转向操纵力的测量 挂车试验 附录转向圆试验功能安全概念安全分析 术…

SQL注入之sqlmap

SQL注入之sqlmap 6.1 SQL注入之sqlmap安装 sqlmap简介&#xff1a; sqlmap是一个自动化的SQL注入工具&#xff0c;其主要功能是扫描&#xff0c;发现并利用给定的URL的SQL注入漏洞&#xff0c;目前支持的数据库是MS-SQL,MYSQL,ORACLE和POSTGRESQL。SQLMAP采用四种独特的SQL注…

PHP8的变量-PHP8知识详解

昨天我们讲解了PHP8的常量&#xff0c;今天讲解PHP8的变量。常量有定义常量和预定义常量&#xff0c;变量呢&#xff1f;那就没有定义变量了&#xff0c;那叫给变量赋值&#xff0c;但是还是有预定义变量的。下面就给大家讲解什么是变量、变量赋值及使用及预定义变量。 一、什么…

第六次作业 密码学

发送者为Alice 接受者为Bob 首先对原始信息进行hash运算得到信息摘要&#xff0c;然后使用发送者Alice私钥进行签名&#xff08;签名的作用是验证该信息是Alice的&#xff09;&#xff0c;然后将原始信息数字签名Alice证书&#xff08;该Alice的证书是由CA组织进行办发的&…

【测试设计】性能测试工具选择:wrk?jmeter?locust?还是LR?

目录 前言 wrk 优点 缺点 jmeter 优点 缺点 locust 优点 缺点 总结 资料获取方法 前言 当你想做性能测试的时候&#xff0c;你会选择什么样的测试工具呢&#xff1f;是会选择wrk&#xff1f;jmeter&#xff1f;locust&#xff1f;还是loadrunner呢&#xff1f; 今…

【图论】无向图连通性(tarjan算法)

割边&#xff1a;dfn[u]<low[v] 割点&#xff1a;dfn[u]<low[v] (若为根节点&#xff0c;要有两个v这样的点) 一.知识点&#xff1a; 1.连通&#xff1a; 在图论中&#xff0c;连通性是指一个无向图中的任意两个顶点之间存在路径。如果对于图中的任意两个顶点 u 和 v&…

Eureka注册中心 与 OpenFeign调用接口

需求 一个应用通过接口&#xff0c;调用另一个应用的接口。使用OpenFeign来实现接口调用。 说明 通过OpenFeign&#xff08;本文接下来简称Feign&#xff09;调用远程接口&#xff0c;需要Eureka注册中心的支持。 OpenFeign调用接口的逻辑如下&#xff1a; 提供接口的应用…

文章详情页 - 评论功能的实现

目录 1. 准备工作 1.1 创建评论表 1.2 创建评论实体类 1.3 创建 mapper 层评论接口和对应的 xml 实现 1.4 准备评论的 service 层 1.5 准备评论的 controller 层 2. 总的初始化详情页 2.1 加载评论列表 2.1.1 实现前端代码 2.1.2 实现后端代码 2.2 查询当前登录用户的…

自然语言处理从入门到应用——LangChain:提示(Prompts)-[提示模板:部分填充的提示模板和提示合成]

分类目录&#xff1a;《自然语言处理从入门到应用》总目录 部分填充的提示模板 提示模板是一个具有.format方法的类&#xff0c;它接受一个键值映射并返回一个字符串&#xff08;一个提示&#xff09;&#xff0c;以传递给语言模型。与其他方法一样&#xff0c;将提示模板进行…

Android Notification的使用

在AndroidManifest.xml中添加权限 <uses-permission android:name"android.permission.POST_NOTIFICATIONS" />常用通知的写法&#xff0c;兼容android 8.0之后的版本 private NotificationManager getNotificationManager() {return (NotificationManager) g…

自然语言处理从入门到应用——LangChain:提示(Prompts)-[提示模板:创建自定义提示模板和含有Few-Shot示例的提示模板]

分类目录&#xff1a;《自然语言处理从入门到应用》总目录 创建自定义提示模板 假设我们希望LLM根据函数名称生成该函数的英文语言解释。为了实现这个任务&#xff0c;我们将创建一个自定义的提示模板&#xff0c;以函数名称作为输入&#xff0c;并格式化提示模板以提供函数的…

elasticsearch 安装

下载 https://www.elastic.co/downloads/past-releases/elasticsearch-7-8-0 1 解压 tar xf elasticsearch-7.8.0.tgz -C /usr/local/ 2 普通用户运行 elasticsearch的启动方式有点特殊&#xff0c;只能以普通用户的方式运维 useradd elasticsearch chown -R elasticsearc…

list与流迭代器stream_iterator

运行代码&#xff1a; //list与流迭代器 #include"std_lib_facilities.h" //声明Item类 struct Item {string name;int iid;double value;Item():name(" "),iid(0),value(0.0){}Item(string ss,int ii,double vv):name(ss),iid(ii),value(vv){}friend ist…