当前位置： 首页 > news >正文

H5前端开发——BOM

news 2026/4/23 17:44:11

H5前端开发——BOM

BOM（Browser Object Model）是指浏览器对象模型，它提供了一组对象和方法，用于与浏览器窗口进行交互。

通过 BOM 对象，开发人员可以操作浏览器窗口的行为和状态，实现与用户的交互和数据传输等功能。在前端开发中，熟练运用 BOM 提供的对象和方法可以更好地控制和优化用户体验。
下面介绍两个案列了解一下：

  1. (设计题)
    使用setTimeout()和setInterval()设计随机点名系统（系统一和系统二分别使用两种方法即可，具体哪个系统使用哪种方法不做限制）。

随机点名系统一：

页面中有若干个名字（全部展示）和一个按钮，实现以下功能。

（1）单击“点名”按钮，按钮的文本设置为“停止”，不停的随机改变一个名字的背景色，其余名字的背景色为初始值。

（2）单击“停止”按钮，按钮的文本设置为“点名”，随机改变一个名字的背景色变色，其余名字的背景色为初始值。

在这里插入图片描述
随机点名系统二：

页面中有若干个名字（但是只显示也1个名字）和一个按钮，实现以下功能。

（1）单击“点名”按钮，按钮的文本设置为“停止”，不停的随机改变名字。

（2）单击“停止”按钮，按钮的文本设置为“点名”，名字选定。

参考效果（可根据自己需求改进，只要实现功能即可）

初始状态：
在这里插入图片描述
随机点名系统一完整代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>随机点名系统</title><style>#container { width: 1200px; text-align: center;margin: 0 auto; }#box { width: 1200px; height: 160px; margin: 40px; clear: both; }#btn { width: 100px; height: 30px; }.name { width: 100px; height: 30px; float: left; background-color: antiquewhite; margin-left: 10px; margin-top: 10px; text-align: center; line-height: 30px; }.highlight { background-color: red; }h1 { text-align: center; }</style>
</head>
<body><div id="container"><h1>随机点名系统</h1><div class="box" id="box"></div><input type="button" id="btn" value="点名"/></div><script>var boxNode = document.getElementById('box');var btn = document.getElementById('btn');var names = document.getElementsByClassName('name');// 创建姓名数组var arrs = ["姓名1", "Theshy", "jackelove", "baolan", "rookie", "ning", "zitai", "crisp", "369", "letme"];for(let i = 0; i < arrs.length; i++) {// 把名字写入div里面var divNode = document.createElement('div');divNode.className = "name";divNode.innerHTML = arrs[i];boxNode.appendChild(divNode);}var timeID;// 点名事件btn.onclick = function() {if(btn.value == '点名') {// 计时器，点名函数timeID = setInterval(dm, 100);btn.value = '停止';}else {// 清除计时器clearInterval(timeID)btn.value = '点名';// 找到有红色背景的名字，移除红色背景var highlightedName = document.querySelector('.highlight');if (highlightedName) {highlightedName.classList.remove('highlight');}// 随机选取一个名字，添加红色背景var random = Math.floor(Math.random() * arrs.length);names[random].classList.add('highlight');}}// 点名函数function dm() {// 清空已经选中的姓名背景色，恢复默认值for(let i = 0; i < names.length; i++) {if(names[i].classList.contains('highlight')) {names[i].classList.remove('highlight');}}// 随机获取一个名字，添加红色背景var random = parseInt(Math.random() * arrs.length);names[random].classList.add('highlight');}</script>
</body>
</html>

在这里插入图片描述

代码解析:
这段代码实现了一个随机点名系统的功能，具体解析如下：

  1. HTML部分：
  • 创建一个id为"container"的div容器，并设置一个标题"h1"、一个空的盒子"box"和一个按钮"btn"。
  • 样式部分定义了"box"、"name"和"h1"的样式。
  1. JavaScript部分：
  • 获取页面中的元素节点，并将它们保存在变量中。
  • 创建一个包含姓名的数组"arrs"，里面存放了一些姓名。
  • 使用循环遍历"arrs"数组，在"box"中创建一个新的div，设置div的class为"name"，将每个姓名添加到div中，然后将这个div添加到"box"中。
  • 定义一个时间间隔ID的变量"timeID"。
  • 为按钮"btn"添加点击事件。当按钮被点击时，根据按钮的值执行相应的操作。
    • 如果按钮的值是"点名"，则通过setInterval函数设置一个定时器，每100毫秒自动执行dm函数，并将按钮的值设置为"停止"。
    • 如果按钮的值是"停止"，则清除定时器，并将按钮的值设置为"点名"。
      • 首先，找到带有红色背景的名字，即拥有"class"为"highlight"的元素。如果存在这样的元素，就移除它的红色背景。
      • 然后，通过生成一个随机数，在数组"names"中随机选取一个名字，并为其添加红色背景。这里使用了classList.add方法来添加名字的"class"，使其背景变红。
  • "dm"函数用于定时执行的点名操作。具体步骤如下：
    • 首先，清除已经选中的名字的红色背景。遍历"names"数组，如果某个名字的"class"包含"highlight"，则移除它的红色背景。
    • 然后，通过生成一个随机数，在数组"arrs"中随机选取一个名字，并为其添加红色背景。

这段代码实现了一个简单的随机点名系统。点击按钮可以开始或停止点名，每次点名会随机选取一个名字，并将其背景颜色变为红色，表示被选中。

随机点名系统一实现效果：

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

随机点名系统二完整代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>随机点名</title><style>div {width: 300px;margin: 10px auto;text-align: center;}div#ready {width: 200px;height: 50px;line-height: 50px;border: 1px solid orange;text-align: center;}button#start {width: 200px;height: 30px;line-height: 30px;text-align: center;border: 1px solid orange;background-color: bisque;margin-top: 10px;}.highlight {background-color: red;}</style></head><body><div><div id="ready">同学们，准备好了吗?</div><button id="start" onclick="toggleRandomName()">点名</button><div id="result"></div></div><script>var names = ["张三", "李四", "王五", "赵六", "钱七"]; // 姓名数组var timerId = null; // 定时器IDfunction toggleRandomName() {var btn = document.getElementById("start");if (btn.innerText === "点名") {// 开始点名btn.innerText = "停止";timerId = setInterval(changeName, 100);} else {// 停止点名btn.innerText = "点名";clearInterval(timerId);displayRandomName(); // 显示被点名的名字highlightRandomName(); // 移除红色背景}}function changeName() {var index = Math.floor(Math.random() * names.length); // 随机选取一个索引highlightRandomName(); // 清除之前选中的名字的红色背景document.getElementById("result").innerText = names[index]; // 更新结果区域的文本内容为选中的名字document.getElementsByClassName("name")[index].classList.add("highlight"); // 为随机选中的名字添加红色背景}function highlightRandomName() {var highlightedName = document.getElementsByClassName("highlight")[0]; // 获取当前被选中的名字元素if (highlightedName) {highlightedName.classList.remove("highlight"); // 移除其红色背景}}function displayRandomName() {var resultElem = document.getElementById("result");resultElem.innerText = "被点名的是：" + resultElem.innerText;}</script></body>
</html>

在这里插入图片描述
以上代码是一个简单的随机点名程序。现在让我们逐行解析代码的作用：

HTML部分：

<div><div id="ready">同学们，准备好了吗?</div><button id="start" onclick="toggleRandomName()">点名</button><div id="result"></div>
</div>

这部分包含了一个准备提示文字、一个按钮和一个用于显示结果的div。

CSS部分：

div {width: 300px;margin: 10px auto;text-align: center;
}
div#ready {width: 200px;height: 50px;line-height: 50px;border: 1px solid orange;text-align: center;
}
button#start {width: 200px;height: 30px;line-height: 30px;text-align: center;border: 1px solid orange;background-color: bisque;margin-top: 10px;
}
.highlight {background-color: red;
}

这部分定义了页面元素的样式，包括div和button的样式，以及被选中名字的高亮样式。

var names = ["张三", "李四", "王五", "赵六", "钱七"]; // 姓名数组
var timerId = null; // 定时器IDfunction toggleRandomName() {var btn = document.getElementById("start");if (btn.innerText === "点名") {// 开始点名btn.innerText = "停止";timerId = setInterval(changeName, 100);} else {// 停止点名btn.innerText = "点名";clearInterval(timerId);displayRandomName(); // 显示被点名的名字highlightRandomName(); // 移除红色背景}
}function changeName() {var index = Math.floor(Math.random() * names.length); // 随机选取一个索引highlightRandomName(); // 清除之前选中的名字的红色背景document.getElementById("result").innerText = names[index]; // 更新结果区域的文本内容为选中的名字document.getElementsByClassName("name")[index].classList.add("highlight"); // 为随机选中的名字添加红色背景
}function highlightRandomName() {var highlightedName = document.getElementsByClassName("highlight")[0]; // 获取当前被选中的名字元素if (highlightedName) {highlightedName.classList.remove("highlight"); // 移除其红色背景}
}function displayRandomName() {var resultElem = document.getElementById("result");resultElem.innerText = "被点名的是：" + resultElem.innerText;
}

这部分包含了几个 JavaScript 函数：

toggleRandomName：用于开始/停止点名。当按钮文字为"点名"时，点击按钮将开始点名过程；当按钮文字为"停止"时，点击按钮将停止点名，并显示被点名的名字。

changeName：用于随机选择一个名字并显示在结果区域。它会先清除之前选中的名字的红色背景，然后将随机选择的新名字显示在结果区域，并为其添加红色背景。

highlightRandomName：用于移除之前选中的名字的红色背景。它会查找当前被选中的名字元素，如果存在则移除其红色背景。
displayRandomName：用于在停止点名时显示被点名的名字。
整体运行流程如下：

点击"点名"按钮将开始点名过程，按钮文字变为"停止"。
每100毫秒随机选择一个名字，并更新结果区域的显示和名字的高亮。

点击"停止"按钮将停止点名过程，按钮文字变回"点名"。同时显示被点名的名字，并移除名字的高亮。

这样，就完成了一个简单的随机点名程序。

相关文章：

H5前端开发——BOM

H5前端开发——BOM BOM&#xff08;Browser Object Model&#xff09;是指浏览器对象模型&#xff0c;它提供了一组对象和方法&#xff0c;用于与浏览器窗口进行交互。 通过 BOM 对象&#xff0c;开发人员可以操作浏览器窗口的行为和状态&#xff0c;实现与用户的交互和数据传…...

编程日记 2023/10/22 8:17:35

stable diffusion如何解决gradio外链无法开启的问题

问题确认 为了确认gradio开启不了是gradio库的问题还是stable diffusion的问题&#xff0c;可以先执行这样一段demo代码 import gradio as grdef greet(name):return "Hello " name "!"demo gr.Interface(fngreet, inputs"text", outputs&q…...

编程日记 2023/10/22 8:16:34

SpringMvc-面试用

一、SpringMvc常用注解 1、修饰在类的 RestController RequestMapping("/test")RestController是什么&#xff1f;其实是一个复合注解 Controller //其实就是Component ResponseBody //独立的注解 public interface RestController {}RequestMapping 也可以认…...

编程日记 2023/10/22 8:14:30

并发编程 # 3

文章目录 一、进程和线程的比较二、GIL全局解释器锁1.引入2.Python解释器的种类结论&#xff1a;在CPython解释其中&#xff0c;同一个进程下开启的多线程&#xff0c;同一时刻只能有一个线程执行&#xff0c;无法利用多核优势。得出结论&#xff1a;GIL锁就是保证在同一时刻只…...

编程日记 2023/10/22 8:13:29

ESP32C3 LuatOS TM1650①驱动测试

合宙TM1650驱动资料 TM1650.lua源码 引脚连接 TM1650ESP32C3SCLGPIO5SDAGPIO4 下载TM1650.lua源码&#xff0c;并以文件形式保存在项目文件夹中 驱动测试源码 --注意:因使用了sys.wait()所有api需要在协程中使用 -- 用法实例 PROJECT "ESP32C3_TM1650" VERSION …...

编程日记 2023/10/22 8:12:27

TCP为什么需要三次握手和四次挥手？

一、三次握手 三次握手&#xff08;Three-way Handshake&#xff09;其实就是指建立一个TCP连接时&#xff0c;需要客户端和服务器总共发送3个包 主要作用就是为了确认双方的接收能力和发送能力是否正常、指定自己的初始化序列号为后面的可靠性传送做准备 过程如下&#xff…...

编程日记 2023/10/22 8:11:25

【C++】一些C++11特性

C特性 1. 列表初始化1.1 {}初始化1.2 initializer_list 2. 声明2.1 auto2.2 typeid2.3 decltype2.4 nullptr 3. STL3.1 新容器3.2 新接口 4. 右值引用5. 移动构造与移动赋值6. lambda表达式7. 可变参数模板8. 包装器9. bind 1. 列表初始化 1.1 {}初始化 C11支持所有内置类型和…...

编程日记 2023/10/22 8:10:23

leetcode 647. 回文子串、516. 最长回文子序列

647. 回文子串 给你一个字符串 s &#xff0c;请你统计并返回这个字符串中 回文子串 的数目。 回文字符串 是正着读和倒过来读一样的字符串。 子字符串 是字符串中的由连续字符组成的一个序列。 具有不同开始位置或结束位置的子串&#xff0c;即使是由相同的字符组成&#…...

编程日记 2023/10/22 8:09:22

Vue Router 刷新当前页面

Vue项目, 在实际工作中, 有些时候需要在 加载完某些数据之后对当前页面进行刷新, 以期 onMounted 等生命周期函数, 或者 数据重新加载. 总之是期望页面可以重新加载一次. 目前总结有三种途径可实现以上需求: 一, reload 直接刷新页面 window.location.reload(); $router.go(…...

编程日记 2023/10/22 8:08:22

lstm 回归实战、 分类demo

预备知识 lstm 参数 输入、输出格式 nn.LSTM(input_dim&#xff0c;hidden_dim,num_layers); imput_dim 特征数 input:(样本数、seq, features_num) h0,c0 (num_layers&#xff0c;seq, hidden_num) output: (样本数、seq, hidden_dim) 再加一个全连接层&#xff0c;将 outpu…...

编程日记 2023/10/22 8:07:20

实践DDD模拟电商系统总结

目录 一、事件风暴 二、系统用例 三、领域上下文 四、架构设计 &#xff08;一&#xff09;六边形架构 &#xff08;二&#xff09;系统分层 五、系统实现 &#xff08;一&#xff09;项目结构 &#xff08;二&#xff09;提交订单功能实现 &#xff08;三&#xff0…...

编程日记 2023/10/22 8:05:18

`SQL`编写判断是否为工作日函数编写

SQL编写判断是否为工作日函数编写 最近的自己在写一些功能,遇到了对于工作日的判断,我就看了看sql,来吧!~(最近就是好疲惫) 我们一起看看(针对ORACLE) 1.声明: CREATE OR REPLACE PACKAGE GZYW_2109_1214.PKG_FUN_GETDAY_HDAY AS /** * 通过节假日代码获取指定的日期[查找基…...

编程日记 2023/10/22 8:04:18

零信任身份管理平台，构建下一代网络安全体系

随着数字化时代的到来&#xff0c;网络安全已成为企业和组织面临的一项重要挑战。传统的网络安全方法已经无法满足不断演变的威胁和技术环境。近期&#xff0c;中国信息通信研究院&#xff08;简称“中国信通院”&#xff09;发布了《零信任发展研究报告&#xff08; 2023 年&a…...

编程日记 2023/10/22 8:03:16

《数据结构、算法与应用C++语言描述》使用C++语言实现链表队列

《数据结构、算法与应用C语言描述》使用C语言实现链表队列 定义 队列的定义 队列&#xff08;queue&#xff09;是一个线性表&#xff0c;其插入和删除操作分别在表的不同端进行。插入元素的那一端称为队尾&#xff08;back或rear&#xff09;&#xff0c;删除元素的那一端称…...

编程日记 2023/10/22 8:02:16

RT-Thread学习笔记（四）：RT-Thread Studio工具使用

RT-Thread Studio工具使用 官网详细资料实用操作1. 查看 RT-Thread RTOS API 文档2.打开已创建的工程3.添加头文件路径4. 如何设置生成hex文件5.新建工程 官网详细资料 RT-Thread Studio 用户手册 实用操作 1. 查看 RT-Thread RTOS API 文档 2.打开已创建的工程 如果打开项目…...

编程日记 2023/10/22 7:59:13

【计算机网络笔记】OSI参考模型中端-端层（传输层、会话层、表示层、应用层）功能介绍

系列文章目录 什么是计算机网络&#xff1f; 什么是网络协议&#xff1f; 计算机网络的结构 数据交换之电路交换 数据交换之报文交换和分组交换 分组交换 vs 电路交换 计算机网络性能&#xff08;1&#xff09;——速率、带宽、延迟 计算机网络性能&#xff08;2&#xff09;…...

编程日记 2023/10/22 7:58:12

RabbitMQ高级知识点

以下是一些 RabbitMQ 的高级知识点&#xff1a; 1. Exchange&#xff1a; RabbitMQ 中的 Exchange 是消息路由器&#xff0c;用来接收消息并且转发到对应的 Queue 中。Exchange 有四种类型&#xff1a;Direct Exchange、Fanout Exchange、Topic Exchange 和 Headers Exchange。…...

编程日记 2023/10/22 7:57:11

Node直接执行ts文件

Node直接执行ts文件 1、常规流程 node 执行 【ts 文件】 流程&#xff1a; 1、编写ts代码 2、编译成js代码 [命令如 &#xff1a;tsc xx.ts] 3、执行js代码 [node xx.js]2、直接执行 想要直接执行 ts 文件&#xff0c;需要安装如下依赖工具。 执行如下命令&#xff1a; # 安装…...

编程日记 2023/10/22 7:55:08

log4j的级别的说明

一 log4j的级别 1.1 级别类型 TRACE 》DEBUG 》 INFO 》 WARN 》 ERROR 》 FATAL 级别高低顺序为&#xff1a; trace级别最低 &#xff0c;Fatal级别最高。由左到右&#xff0c;从低到高 1.2 包含范围 原则&#xff1a; 本级别包含本级别以及大于本级别的内容&#xff0c;…...

编程日记 2023/10/22 7:54:06

头脑风暴之约瑟夫环问题

一 问题的引入 约瑟夫问题的源头完全可以命名为“自杀游戏”。本着和谐友爱和追求本质的目的&#xff0c;可以把问题描述如下&#xff1a; 现有n个人围成一桌坐下&#xff0c;编号从1到n&#xff0c;从编号为1的人开始报数。报数也从1开始&#xff0c;报到m人离席&#xff0c…...

编程日记 2023/10/22 7:53:04

大模型服务化落地卡点突破：基于CUDA 13 Stream Ordered Memory Allocator的动态batching算子框架（含GitHub Star≥1.2k的开源实现）

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;大模型服务化落地的工程瓶颈与CUDA 13时代新范式 随着千亿参数模型常态化部署&#xff0c;传统推理服务架构在显存带宽、内核调度粒度和多卡协同效率上遭遇系统性瓶颈。CUDA 13 引入的 Unified Memory …...

编程新知 2026/4/23 17:36:15

从B站视频到实操：StaMPS-PSI处理中的那些“坑”与高效调试技巧（基于Gamma和mt_prep_gamma）

从B站视频到实操&#xff1a;StaMPS-PSI处理中的那些“坑”与高效调试技巧 在B站等平台学习StaMPS-PSI处理的过程中&#xff0c;许多初学者会经历从“一看就会”到“一做就废”的典型困境。尼莫大佬等UP主的教程视频虽然详细展示了操作流程&#xff0c;但当用户真正动手复现时&…...

编程新知 2026/4/23 17:16:58

GINav：GNSS/INS一体化导航数据处理平台 - 高精度定位与融合算法的MATLAB解决方案

GINav&#xff1a;GNSS/INS一体化导航数据处理平台 - 高精度定位与融合算法的MATLAB解决方案 【免费下载链接】GINav GNSS and GNSS/INS integration algorithms 项目地址: https://gitcode.com/gh_mirrors/gi/GINav 在自动驾驶、无人机导航和精准农业等领域&#xff0c…...

编程新知 2026/4/23 16:35:59

宏基因组病毒序列识别六剑客：geNomad, DeepVirFinder, VirSorter2, VIBRANT, PPR-Meta, viralVerify 实战部署与结果整合

1. 宏基因组病毒序列识别工具概述 在宏基因组研究中&#xff0c;病毒序列的识别一直是个技术难点。传统的BLAST比对方法虽然直观&#xff0c;但面对海量数据时效率低下&#xff0c;且容易遗漏新型病毒。近年来&#xff0c;随着机器学习技术的普及&#xff0c;一批专门针对病毒序…...

编程新知 2026/4/23 15:02:07

终极AutoGPT身份认证实战指南：从JWT配置到安全验证的完整教程

终极AutoGPT身份认证实战指南&#xff1a;从JWT配置到安全验证的完整教程 【免费下载链接】AutoGPT AutoGPT is the vision of accessible AI for everyone, to use and to build on. Our mission is to provide the tools, so that you can focus on what matters. 项目地址…...

编程新知 2026/4/23 14:52:01

h5maker：3步搭建专业级H5页面，零代码实现营销创意

h5maker&#xff1a;3步搭建专业级H5页面&#xff0c;零代码实现营销创意 【免费下载链接】h5maker h5编辑器类似maka、易企秀 账号/密码&#xff1a;admin 项目地址: https://gitcode.com/gh_mirrors/h5/h5maker 还在为快速制作H5页面而烦恼吗&#xff1f;营销活动需要…...

编程新知 2026/4/23 14:26:32

YOLOv8-Pose实战：从Labelme标注到模型训练的数据流水线构建

1. 环境准备与工具安装 在开始构建YOLOv8-Pose数据流水线之前&#xff0c;我们需要准备好开发环境和必要的工具。我推荐使用Python 3.8环境&#xff0c;这个版本在兼容性和稳定性方面表现最好。首先安装Labelme标注工具&#xff0c;这个工具在关键点标注领域几乎是行业标准&am…...

编程新知 2026/4/23 14:05:59

读者 30+ 问合集：从“多 Agent 调度不准“到 AI 团队协作避坑指南

上篇文章评论区积攒了几十个问题&#xff0c;挑了最高频的几类&#xff0c;一篇讲完。从概念混淆、环境配置、到多角色协作、国内模型接入&#xff0c;系统梳理。 一、最容易混的三个概念&#xff08;搞清楚这个&#xff0c;80% 的问题就消解了&#xff09; 很多朋友把下面三件…...

编程新知 2026/4/23 13:15:13

从理论到代码：用Python/Simulink复现积分滑模控制器（附抖振抑制对比）

从理论到代码&#xff1a;用Python/Simulink实现积分滑模控制的工程实践 在控制工程领域&#xff0c;滑模控制因其强鲁棒性而备受青睐&#xff0c;但传统方法面临的抖振问题和初始阶段鲁棒性缺失一直困扰着实践者。积分滑模控制通过创新性的设计&#xff0c;不仅解决了这两个痛…...

编程新知 2026/4/23 12:56:35

Unity的Game视图在Scale放大后无法拖动

问题描述Unity的Game视图在Scale放大后&#xff0c;若未处于Play模式&#xff0c;可能出现无滚动条且只能看到中间区域的情况&#xff0c;无法查看其他部分。解决方法调整Game视图为非Play模式 在Unity编辑器中&#xff0c;确保当前未进入Play模式。点击Game视图右上角的Scale滑…...

编程新知 2026/4/23 11:12:23