JS+CSS随机点名详细介绍复制可用(可自己添加人名)

想必大家也想拥有一个可以随机点名的网页,接下来我为大家介绍一下随机点名,可用于抽人,哈哈

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>* {margin: 0;padding: 0;}.box {width: 850px;/* 我固定死了高度 如果需要修改黑色背景的高度请修改这部分 */height: 1000px;background-color: black;margin: 0 auto;position: relative;}.box>div {width: 200px;height: 75px;font-size: 25px;text-align: center;border: 1px solid white;background-color: orange;color: white;float: left;line-height: 75px;border-radius: 5px;margin-left: 10px;margin-bottom: 10px;}.boss {width: 100%;background-color: black;position: relative;}.bth {font-size: 50px;width: 220px;height: 120px;background-color: orange;position: absolute;right: 10px;bottom: 200px;}</style>
</head><body><!-- 大盒子 --><div class="boss"><div class="box"><!-- 可自己添加名字 --><!-- 现在是43个div 想加几个人就用多少个div--><!-- 记住不管是加还是减都要调整JS部分 已经在JS部分写好流程 --><div>name</div><div>name</div><div>name</div><div>name</div><div>name</div><div>name</div><div>name</div><div>name</div><div>name</div><div>name</div><div>name</div><div>name</div><div>name</div><div>name</div><div>name</div><div>name</div><div>name</div><div>name</div><div>name</div><div>name</div><div>name</div><div>name</div><div>name</div><div>name</div><div>name</div><div>name</div><div>name</div><div>name</div><div>name</div><div>name</div><div>name</div><div>name</div><div>name</div><div>name</div><div>name</div><div>name</div><div>name</div><div>name</div><div>name</div><div>name</div><div>name</div><div>name</div><div>name</div></div><input class="bth" type="button" value="点击点名"></div>
</body>
<script>//获取input点击var bth = document.querySelector(".bth")//获取所有box下面的divvar div = document.querySelectorAll(".box div")//点击事件bth.onclick = function () {//点击后改按钮的value值bth.value = "点名中"// 点击后btn的背景颜色变成白色bth.style.backgroundColor = "#fff"var timer = setInterval(function () {//循环所有要变色的盒子 因为我现在有43个div就i<43// 有几个div就i<div.lengthfor (var i = 0; i < 43; i++) {//定3个随机数,要放在循环里面var a = Math.floor(Math.random() * 256)var b = Math.floor(Math.random() * 256)var c = Math.floor(Math.random() * 256)// 这是变色div[i].style.backgroundColor = "rgb" + "(" + a + "," + b + "," + c + ")"// 给按钮添加disabled属性 因为我点击之后,在完成点名之前不能继续点击bth.setAttribute("disabled", "disabled")}}, 100)//点击后2秒执行延时器里的内容setTimeout(function () {//清除定时器clearInterval(timer)//循环div,2秒后所有的div的背景颜色变成orangefor (var j = 0; j < 43; j++) {div[j].style.backgroundColor = "orange"}//挑选一个幸运儿 0 - 43的随机数 有多少人就Math.floor(Math.random() * (人数+1))var d = Math.floor(Math.random() * 44)// div变成红色 就是幸运儿了div[d].style.backgroundColor = "red"// 执行完毕按钮重新变为点击点名bth.value = "点击点名"// 按钮背景颜色重新变为orangebth.style.backgroundColor = "orange"// 2s后按钮可以重新点击bth.removeAttribute("disabled")}, 2000)}</script></html>

最终效果:

请添加图片描述
感谢大家的阅读,如有不对的地方,可以向我提出,感谢大家!

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

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

相关文章

代码随想录 Day38 完全背包问题 LeetCode T70 爬楼梯 T322 零钱兑换 T279 完全平方数

前言 在今天的题目开始之前,让我们来回顾一下之前的知识,动规五部曲 1.确定dp数组含义 2.确定dp数组的递推公式 3.初始化dp数组 4.确定遍历顺序 5.打印dp数组来排错 tips: 1.当求取物品有限的时候用0-1背包,求取物品无限的时候用完全背包 结果是排列还是组合也有说法,当结果是组…

【Mybatis小白从0到90%精讲】12:Mybatis删除 delete, 推荐使用主键删除!

文章目录 前言XML映射文件方式推荐使用主键删除注解方式工具类前言 在实际开发中,我们经常需要删除数据库中的数据,MyBatis可以使用XML映射文件或注解来编写删除(delete)语句,下面是两种方法的示例。 XML映射文件方式 Mapper: int delete(int id);Mapper.xml:

抖音10月榜单有哪些看点?

10月20日&#xff0c;抖音双11好物节在抖音平台正式开启抢跑&#xff0c;据数据显示&#xff0c;截止10月31日平台多项双11销售增长记录再次被刷新。 *新抖双十一活动也已开启&#xff0c;最高可省30788元&#xff0c;活动详情&#x1f449; 抖音平台内大促氛围火爆&#xff0…

麒麟KYLINIOS软件仓库搭建02-软件仓库添加新的软件包

原文链接&#xff1a;麒麟KYLINIOS软件仓库搭建02-软件仓库添加新的软件包 hello&#xff0c;大家好啊&#xff0c;今天给大家带来麒麟桌面操作系统软件仓库搭建的文章02-软件仓库添加新的软件包&#xff0c;本篇文章主要给大家介绍了如何在麒麟桌面操作系统2203-x86版本上&…

14 _ 排序优化:如何实现一个通用的、高性能的排序函数?

几乎所有的编程语言都会提供排序函数,比如C语言中qsort(),C++ STL中的sort()、stable_sort(),还有Java语言中的Collections.sort()。在平时的开发中,我们也都是直接使用这些现成的函数来实现业务逻辑中的排序功能。那你知道这些排序函数是如何实现的吗?底层都利用了哪种排…

Python点云处理(十九)点云地面点提取——CSF布料模拟算法

目录 0 简述1 算法原理2 具体步骤3 实现0 简述 对于点云地面点滤波,众多传统算法滤波效果容易受到地形特征的影响(通常在复杂场景及陡峭地形区域滤波效果较差)且常常需要用户对数据有较为丰富的先验知识来进行设置滤波器中的各种参数。为了解决这些问题,张吴明教授等人提出…

二蛋赠书七期:《云原生数据中台:架构、方法论与实践》

前言 大家好&#xff01;我是二蛋&#xff0c;一个热爱技术、乐于分享的工程师。在过去的几年里&#xff0c;我一直通过各种渠道与大家分享技术知识和经验。我深知&#xff0c;每一位技术人员都对自己的技能提升和职业发展有着热切的期待。因此&#xff0c;我非常感激大家一直…

Docker-compose容器群集编排管理工具

目录 Docker-compose 1、Docker-compose 的三大概念 2、YAML文件格式及编写注意事项 1&#xff09;使用 YAML 时需要注意下面事项 2&#xff09;ymal文件格式 3&#xff09;json格式 3、Docker Compose配置常用字段 4、Docker-compose的四种重启策略 5、Docker Compose…

BetterDisplay Pro v1.4.15(显示器管理管理软件)

BetterDisplay Pro是一款屏幕显示优化工具&#xff0c;可用于Windows和Mac操作系统。它可以帮助用户调整屏幕的亮度、对比度、色彩等参数&#xff0c;以获得更好的视觉体验。此外&#xff0c;BetterDisplay Pro还提供了一些额外的功能&#xff0c;如屏幕分割、窗口管理、快捷键…

基于单片机的车载太阳能板自动跟踪系统研究

欢迎大家点赞、收藏、关注、评论啦 &#xff0c;由于篇幅有限&#xff0c;只展示了部分核心代码。 技术交流认准下方 CSDN 官方提供的联系方式 文章目录 概要 一、总体设计开发流程二、机械结构设计与研究3.1 机械系统总体设计3.1.1 太阳能板折叠传动 三、太阳能自动跟踪系统硬…

卡尔曼家族从零解剖-(04)贝叶斯滤波→细节讨论,逻辑梳理,批量优化

讲解关于slam一系列文章汇总链接:史上最全slam从零开始&#xff0c;针对于本栏目讲解的 卡尔曼家族从零解剖 链接 :卡尔曼家族从零解剖-(00)目录最新无死角讲解&#xff1a;https://blog.csdn.net/weixin_43013761/article/details/133846882 文末正下方中心提供了本人 联系…

内存取证 worldskills3.vmem与gs02.jpg题目WP

worldskills3.vmem 题目信息 获取admin用户密码是多少&#xff1f; 获取ip和主机名是什么&#xff1f; 获取桌面上的flag.txt文件的内容是什么&#xff1f; 服务器存在一个挖矿病毒&#xff0c;矿池地址是&#xff1f; 恶意代码在系统中注册了服务&#xff0c;服务名是什么&a…