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

H5前端开发——BOM

news 2025/6/15 16:45:15

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

Prompt Tuning、P-Tuning、Prefix Tuning的区别

一、Prompt Tuning、P-Tuning、Prefix Tuning的区别 1. Prompt Tuning（提示调优） 核心思想：固定预训练模型参数，仅学习额外的连续提示向量（通常是嵌入层的一部分）。实现方式：在输入文本前添加可训练的连续向量（软提示），模型只更新这些提示参数。优势：参数量少（仅提…...

编程新知 2025/6/13 23:55:12

css实现圆环展示百分比，根据值动态展示所占比例

代码如下 <view class""><view class"circle-chart"><view v-if"!!num" class"pie-item" :style"{background: conic-gradient(var(--one-color) 0%,#E9E6F1 ${num}%),}"></view><view v-else …...

编程新知 2025/6/15 1:42:50

STM32+rt-thread判断是否联网

一、根据NETDEV_FLAG_INTERNET_UP位判断 static bool is_conncected(void) {struct netdev *dev RT_NULL;dev netdev_get_first_by_flags(NETDEV_FLAG_INTERNET_UP);if (dev RT_NULL){printf("wait netdev internet up...");return false;}else{printf("loc…...

编程新知 2025/6/15 5:29:02

Objective-C常用命名规范总结

【OC】常用命名规范总结 文章目录 【OC】常用命名规范总结1.类名&#xff08;Class Name)2.协议名&#xff08;Protocol Name)3.方法名&#xff08;Method Name)4.属性名&#xff08;Property Name&#xff09;5.局部变量/实例变量&#xff08;Local / Instance Variables&…...

编程新知 2025/6/12 14:43:42

Linux-07 ubuntu 的 chrome 启动不了

文章目录 问题原因解决步骤一、卸载旧版chrome二、重新安装chorme三、启动不了&#xff0c;报错如下四、启动不了&#xff0c;解决如下 总结 问题原因 在应用中可以看到chrome&#xff0c;但是打不开(说明&#xff1a;原来的ubuntu系统出问题了&#xff0c;这个是备用的硬盘&a…...

编程新知 2025/6/12 19:22:02

IoT/HCIP实验-3/LiteOS操作系统内核实验(任务、内存、信号量、CMSIS..)

文章目录 概述HelloWorld 工程C/C配置编译器主配置Makefile脚本烧录器主配置运行结果程序调用栈 任务管理实验实验结果osal 系统适配层osal_task_create 其他实验实验源码内存管理实验互斥锁实验信号量实验 CMISIS接口实验还是得JlINKCMSIS 简介LiteOS->CMSIS任务间消息交互…...

编程新知 2025/6/12 19:32:47

3-11单元格区域边界定位(End属性)学习笔记

返回一个Range 对象&#xff0c;只读。该对象代表包含源区域的区域上端下端左端右端的最后一个单元格。等同于按键 End 向上键(End(xlUp))、End向下键(End(xlDown))、End向左键(End(xlToLeft)End向右键(End(xlToRight)) 注意&#xff1a;它移动的位置必须是相连的有内容的单元格…...

编程新知 2025/6/15 11:18:42

什么是Ansible Jinja2

理解 Ansible Jinja2 模板 Ansible 是一款功能强大的开源自动化工具&#xff0c;可让您无缝地管理和配置系统。Ansible 的一大亮点是它使用 Jinja2 模板&#xff0c;允许您根据变量数据动态生成文件、配置设置和脚本。本文将向您介绍 Ansible 中的 Jinja2 模板&#xff0c;并通…...

编程新知 2025/6/15 13:54:09

python执行测试用例，allure报乱码且未成功生成报告

allure执行测试用例时显示乱码&#xff1a;‘allure’ &#xfffd;&#xfffd;&#xfffd;&#xfffd;&#xfffd;ڲ&#xfffd;&#xfffd;&#xfffd;&#xfffd;ⲿ&#xfffd;&#xfffd;&#xfffd;Ҳ&#xfffd;&#xfffd;&#xfffd;ǿ&#xfffd;&am…...

编程新知 2025/6/12 17:03:52

Redis：现代应用开发的高效内存数据存储利器

一、Redis的起源与发展 Redis最初由意大利程序员Salvatore Sanfilippo在2009年开发&#xff0c;其初衷是为了满足他自己的一个项目需求&#xff0c;即需要一个高性能的键值存储系统来解决传统数据库在高并发场景下的性能瓶颈。随着项目的开源&#xff0c;Redis凭借其简单易用、…...

编程新知 2025/6/12 8:42:56