• H5前端开发——BOM

    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
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84

    在这里插入图片描述

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

    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; // 定时器ID

      function 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>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81

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

    HTML部分：

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


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    这部分包含了一个准备提示文字、一个按钮和一个用于显示结果的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;
}


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25

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

    var names = ["张三", "李四", "王五", "赵六", "钱七"]; // 姓名数组
var timerId = null; // 定时器ID

function 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;
}


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37

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

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

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

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

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

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

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

  • 相关阅读:
    FFmpeg入门详解之24：短视频技术原理
    计算机图形学(八)-纹理映射、计算重心坐标、UV插值、双线性插值、MipMap
    owasp top 10
    JWT&跨域认证
    java中批量导出文件并压缩到zip文件中
    谷歌翻译不用代理可用的免费api python版本亲测可用
    罗胖关于学习的观点
    HTML5网页设计制作基础大二dreamweaver作业、使用HTML+CSS技术制作博客网站（5个页面）
    慕思股份在深交所上市：毛利率持续下滑，2022年一季度营销失利
    集成Emscripten+wasm至React项目踩坑记录
  • 原文地址：https://blog.csdn.net/Myx74270512/article/details/133951930