BOM

对象#xff0c;开发人员可以操作浏览器窗口的行为和状态#xff0c;实现与用户的交互和数据传…H5前端开发——BOM

BOMBrowser

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

BOM

对象开发人员可以操作浏览器窗口的行为和状态实现与用户的交互和数据传输等功能。

在前端开发中熟练运用

BOM

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

随机点名系统一

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

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

随机点名系统二

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

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

初始状态

charsetUTF-8title随机点名系统/titlestyle#container

width:

document.getElementById(box);var

btn

document.getElementById(btn);var

names

document.getElementsByClassName(name);//

创建姓名数组var

document.createElement(div);divNode.className

arrs[i];boxNode.appendChild(divNode);}var

timeID;//

清除计时器clearInterval(timeID)btn.value

点名;//

document.querySelector(.highlight);if

(highlightedName)

{highlightedName.classList.remove(highlight);}//

随机选取一个名字添加红色背景var

arrs.length);names[random].classList.add(highlight);}}//

点名函数function

{if(names[i].classList.contains(highlight))

{names[i].classList.remove(highlight);}}//

随机获取一个名字添加红色背景var

arrs.length);names[random].classList.add(highlight);}/script

/body

创建一个id为container的div容器并设置一个标题h1、一个空的盒子box和一个按钮btn。

样式部分定义了box、name和h1的样式。

JavaScript部分

获取页面中的元素节点并将它们保存在变量中。

创建一个包含姓名的数组arrs里面存放了一些姓名。

使用循环遍历arrs数组在box中创建一个新的div设置div的class为name将每个姓名添加到div中然后将这个div添加到box中。

定义一个时间间隔ID的变量timeID。

为按钮btn添加点击事件。

当按钮被点击时根据按钮的值执行相应的操作。

如果按钮的值是点名则通过setInterval函数设置一个定时器每100毫秒自动执行dm函数并将按钮的值设置为停止。

如果按钮的值是停止则清除定时器并将按钮的值设置为点名。

首先找到带有红色背景的名字即拥有class为highlight的元素。

如果存在这样的元素就移除它的红色背景。

然后通过生成一个随机数在数组names中随机选取一个名字并为其添加红色背景。

这里使用了classList.add方法来添加名字的class使其背景变红。

首先清除已经选中的名字的红色背景。

遍历names数组如果某个名字的class包含highlight则移除它的红色背景。

然后通过生成一个随机数在数组arrs中随机选取一个名字并为其添加红色背景。

这段代码实现了一个简单的随机点名系统。

点击按钮可以开始或停止点名每次点名会随机选取一个名字并将其背景颜色变为红色表示被选中。

随机点名系统一实现效果

onclicktoggleRandomName()点名/buttondiv

names

document.getElementById(start);if

(btn.innerText

点名;clearInterval(timerId);displayRandomName();

移除红色背景}}function

清除之前选中的名字的红色背景document.getElementById(result).innerText

names[index];

更新结果区域的文本内容为选中的名字document.getElementsByClassName(name)[index].classList.add(highlight);

{var

document.getElementsByClassName(highlight)[0];

(highlightedName)

{highlightedName.classList.remove(highlight);

移除其红色背景}}function

document.getElementById(result);resultElem.innerText

resultElem.innerText;}/script/body

/html

以上代码是一个简单的随机点名程序。

现在让我们逐行解析代码的作用

HTML部分

onclicktoggleRandomName()点名/buttondiv

idresult/div

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

CSS部分

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

var

document.getElementById(start);if

(btn.innerText

点名;clearInterval(timerId);displayRandomName();

移除红色背景}

清除之前选中的名字的红色背景document.getElementById(result).innerText

names[index];

更新结果区域的文本内容为选中的名字document.getElementsByClassName(name)[index].classList.add(highlight);

}function

document.getElementsByClassName(highlight)[0];

(highlightedName)

{highlightedName.classList.remove(highlight);

移除其红色背景}

document.getElementById(result);resultElem.innerText

JavaScript

toggleRandomName用于开始/停止点名。

当按钮文字为点名时点击按钮将开始点名过程当按钮文字为停止时点击按钮将停止点名并显示被点名的名字。

changeName用于随机选择一个名字并显示在结果区域。

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

highlightRandomName用于移除之前选中的名字的红色背景。

它会查找当前被选中的名字元素如果存在则移除其红色背景。

displayRandomName用于在停止点名时显示被点名的名字。

整体运行流程如下

每100毫秒随机选择一个名字并更新结果区域的显示和名字的高亮。

点击停止按钮将停止点名过程按钮文字变回点名。

同时显示被点名的名字并移除名字的高亮。