• web需求记录

    需求1：根据后端传过来的设备名:DESKTOP-4DQRGQB，以及mac:e0:be:03:74:40:0b；iQOO-8，mac:b0:33:66:38:c3:25，用web option 是动态增加的（也就是那个选择框里面的东西是根据后端传过来的值动态增加的），当select选择设备名字时，下面一个框显示对应mac的地址

    代码如下：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>选择设备和显示MAC地址</title>
    7. </head>
    8. <body>
    9.     <label for="deviceSelect">设备选择：</label>
    10.     <select id="deviceSelect" onchange="updateMacAddress()">
    11.         <!-- options will be added dynamically -->
    12.     </select>
    13.  
    14.     <div id="macAddressDisplay">MAC地址：未选择设备</div>
    15.  
    16.     <script>
    17.         // 后端传递的设备名和对应的MAC地址
    18.         const deviceData = {
    19.             'DESKTOP-4DQRGQB': 'e0:be:03:74:40:0b',
    20.             'iQOO-8': 'b0:33:66:38:c3:25',
    21.             'iQO0-7': 'b0:33:66:38:c3:2',
    22.             'iQOO-6': 'b0:33:66:38:c3:3',
    23.             // 添加更多设备的MAC地址
    24.         };
    25.  
    26.         // 获取选择设备的select元素
    27.         const deviceSelect = document.getElementById('deviceSelect');
    28.  
    29.         // 初始化select中的options
    30.         for (const device in deviceData) {
    31.             const option = document.createElement('option');
    32.             option.value = device;
    33.             option.textContent = device;
    34.             deviceSelect.appendChild(option);
    35.         }
    36.  
    37.         // 更新MAC地址显示框的函数
    38.         function updateMacAddress() {
    39.             // 获取选择的设备名
    40.             const selectedDevice = deviceSelect.value;
    41.  
    42.             // 获取对应设备的MAC地址
    43.             const macAddress = deviceData[selectedDevice] || '未知';
    44.  
    45.             // 更新MAC地址显示框的内容
    46.             document.getElementById('macAddressDisplay').textContent = `MAC地址：${macAddress}`;
    47.         }
    48.  
    49.         // 初始页面加载时调用一次，确保显示默认值
    50.         updateMacAddress();
    51.     </script>
    52. </body>
    53. </html>

    效果如下：

    需求2:根据后端传过来的设备名:DESKTOP-4DQRGQB，以及mac:e0:be:03:74:40:0b；iQOO-8，mac:b0:33:66:38:c3:25，用web option是动态增加的，当select选择设备名字时，下面一个框显示对应mac的地址，在mac地址下面有2个输入框，分别是上行速率和下行速率，需要我们手动输入，然后可以提交post请求。

    代码如下：

    1. ```html
    2. <!DOCTYPE html>
    3. <html lang="en">
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>选择设备和显示MAC地址、速率</title>
    8. </head>
    9. <body>
    10.     <label for="deviceSelect">设备选择：</label>
    11.     <select id="deviceSelect" onchange="updateDeviceInfo()">
    12.         <!-- options will be added dynamically -->
    13.     </select>
    14.  
    15.     <div>
    16.         <p id="macAddressDisplay">MAC地址：未选择设备</p>
    17.         <label for="uploadRate">上行速率：</label>
    18.         <input type="text" id="uploadRate">
    19.         <label for="downloadRate">下行速率：</label>
    20.         <input type="text" id="downloadRate">
    21.     </div>
    22.  
    23.     <div>
    24.         <button onclick="submitPostRequest()">提交</button>
    25.     </div>
    26.  
    27.     <script>
    28.         // 后端传递的设备名和对应的MAC地址
    29.         const deviceData = {
    30.             'DESKTOP-4DQRGQB': 'e0:be:03:74:40:0b',
    31.             'iQOO-8': 'b0:33:66:38:c3:25',
    32.             // 添加更多设备的MAC地址
    33.         };
    34.  
    35.         // 获取选择设备的select元素
    36.         const deviceSelect = document.getElementById('deviceSelect');
    37.  
    38.         // 初始化select中的options
    39.         for (const device in deviceData) {
    40.             const option = document.createElement('option');
    41.             option.value = device;
    42.             option.textContent = device;
    43.             deviceSelect.appendChild(option);
    44.         }
    45.  
    46.         // 更新设备信息的函数
    47.         function updateDeviceInfo() {
    48.             // 获取选择的设备名
    49.             const selectedDevice = deviceSelect.value;
    50.  
    51.             // 获取对应设备的MAC地址
    52.             const macAddress = deviceData[selectedDevice] || '未知';
    53.  
    54.             // 更新MAC地址显示框的内容
    55.             document.getElementById('macAddressDisplay').textContent = `MAC地址：${macAddress}`;
    56.         }
    57.  
    58.         // 提交POST请求的函数
    59.         function submitPostRequest() {
    60.             // 获取用户输入的值
    61.             const uploadRate = document.getElementById('uploadRate').value;
    62.             const downloadRate = document.getElementById('downloadRate').value;
    63.  
    64.             // 获取选择的设备名
    65.             const selectedDevice = deviceSelect.value;
    66.  
    67.             // 获取对应设备的MAC地址
    68.             const macAddress = deviceData[selectedDevice] || '未知';
    69.  
    70.             // 构造要提交的数据
    71.             const postData = {
    72.                 device: selectedDevice,
    73.                 mac: macAddress,
    74.                 uploadRate: uploadRate,
    75.                 downloadRate: downloadRate
    76.             };
    77.  
    78.             // 模拟提交POST请求，你需要将下面的部分替换为实际的后端API请求
    79.             console.log('模拟提交POST请求:', postData);
    80.             // 此处可以使用fetch或其他AJAX方法向后端发送POST请求
    81.         }
    82.     </script>
    83. </body>
    84. </html>

    运行效果：

    需求3：点击增加按钮的时候，会根据后端传过来的设备名:DESKTOP-4DQRGQB，以及mac:e0:be:03:74:40:0b；iQOO-8，mac:b0:33:66:38:c3:25，用web option是动态增加的，当select选择设备名字时，下面一个框显示对应mac的地址，在mac地址下面有2个输入框，分别是上行速率和下行速率，需要我们手动输入，然后可以提交post请求，点击取消按钮就会折叠起来，不提交请求。

    代码如下：

    1. ```html
    2. <!DOCTYPE html>
    3. <html lang="en">
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>选择设备和显示MAC地址、速率</title>
    8.     <style>
    9.         .hidden {
    10.             display: none;
    11.         }
    12.     </style>
    13. </head>
    14. <body>
    15.     <label for="deviceSelect">设备选择：</label>
    16.     <select id="deviceSelect" onchange="updateDeviceInfo()">
    17.         <!-- options will be added dynamically -->
    18.     </select>
    19.  
    20.     <div>
    21.         <p id="macAddressDisplay">MAC地址：未选择设备</p>
    22.  
    23.         <div id="rateInputs" class="hidden">
    24.             <label for="uploadRate">上行速率：</label>
    25.             <input type="text" id="uploadRate">
    26.             <label for="downloadRate">下行速率：</label>
    27.             <input type="text" id="downloadRate">
    28.         </div>
    29.     </div>
    30.  
    31.     <div>
    32.         <button onclick="expandInputs()">增加</button>
    33.         <button onclick="collapseInputs()">取消</button>
    34.         <button onclick="submitPostRequest()">提交</button>
    35.     </div>
    36.  
    37.     <script>
    38.         // 后端传递的设备名和对应的MAC地址
    39.         const deviceData = {
    40.             'DESKTOP-4DQRGQB': 'e0:be:03:74:40:0b',
    41.             'iQOO-8': 'b0:33:66:38:c3:25',
    42.             // 添加更多设备的MAC地址
    43.         };
    44.  
    45.         // 获取选择设备的select元素
    46.         const deviceSelect = document.getElementById('deviceSelect');
    47.  
    48.         // 初始化select中的options
    49.         for (const device in deviceData) {
    50.             const option = document.createElement('option');
    51.             option.value = device;
    52.             option.textContent = device;
    53.             deviceSelect.appendChild(option);
    54.         }
    55.  
    56.         // 更新设备信息的函数
    57.         function updateDeviceInfo() {
    58.             // 获取选择的设备名
    59.             const selectedDevice = deviceSelect.value;
    60.  
    61.             // 获取对应设备的MAC地址
    62.             const macAddress = deviceData[selectedDevice] || '未知';
    63.  
    64.             // 更新MAC地址显示框的内容
    65.             document.getElementById('macAddressDisplay').textContent = `MAC地址：${macAddress}`;
    66.  
    67.             // 显示输入框
    68.             document.getElementById('rateInputs').classList.remove('hidden');
    69.         }
    70.  
    71.         // 增加按钮的点击事件处理函数
    72.         function expandInputs() {
    73.             // 显示输入框
    74.             document.getElementById('rateInputs').classList.remove('hidden');
    75.         }
    76.  
    77.         // 取消按钮的点击事件处理函数
    78.         function collapseInputs() {
    79.             // 隐藏输入框
    80.             document.getElementById('rateInputs').classList.add('hidden');
    81.         }
    82.  
    83.         // 提交POST请求的函数
    84.         function submitPostRequest() {
    85.             // 获取用户输入的值
    86.             const uploadRate = document.getElementById('uploadRate').value;
    87.             const downloadRate = document.getElementById('downloadRate').value;
    88.  
    89.             // 获取选择的设备名
    90.             const selectedDevice = deviceSelect.value;
    91.  
    92.             // 获取对应设备的MAC地址
    93.             const macAddress = deviceData[selectedDevice] || '未知';
    94.  
    95.             // 构造要提交的数据
    96.             const postData = {
    97.                 device: selectedDevice,
    98.                 mac: macAddress,
    99.                 uploadRate: uploadRate,
    100.                 downloadRate: downloadRate
    101.             };
    102.  
    103.             // 模拟提交POST请求，你需要将下面的部分替换为实际的后端API请求
    104.             console.log('模拟提交POST请求:', postData);
    105.             // 此处可以使用fetch或其他AJAX方法向后端发送POST请求
    106.         }
    107.     </script>
    108. </body>
    109. </html>

    运行效果：

    需求4：一开始只有一个增加按钮，也没有提交和取消按钮，当点击增加按钮的时候，才会根据后端传过来的设备名:DESKTOP-4DQRGQB，以及mac:e0:be:03:74:40:0b；iQOO-8，mac:b0:33:66:38:c3:25，用web option是动态增加的，当select选择设备名字时，下面一个框显示对应mac的地址，在mac地址下面有2个输入框，分别是上行速率和下行速率，需要我们手动输入，然后可以提交post请求，点击取消按钮就会折叠起来，不提交请求。

    代码如下：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>动态增加设备</title>
    7.     <style>
    8.         .hidden {
    9.             display: none;
    10.         }
    11.     </style>
    12. </head>
    13. <body>
    14.     <div id="devicesContainer"></div>
    15.  
    16.     <script>
    17.         // 后端传递的设备名和对应的MAC地址
    18.         const deviceData = {
    19.             'DESKTOP-4DQRGQB': 'e0:be:03:74:40:0b',
    20.             'iQOO-8': 'b0:33:66:38:c3:25',
    21.             // 添加更多设备的MAC地址
    22.         };
    23.  
    24.         // 用于计数的变量
    25.         let deviceCount = 0;
    26.  
    27.         // 获取容器元素
    28.         const devicesContainer = document.getElementById('devicesContainer');
    29.  
    30.         // 初始化设备选择框
    31.         function addDevice() {
    32.             // 增加设备数计数
    33.             deviceCount++;
    34.  
    35.             // 创建设备选择框
    36.             const deviceSelect = document.createElement('select');
    37.             deviceSelect.id = `deviceSelect${deviceCount}`;
    38.             deviceSelect.addEventListener('change', showMacAndRates);
    39.  
    40.             // 初始化设备选择框的options
    41.             for (const device in deviceData) {
    42.                 const option = document.createElement('option');
    43.                 option.value = device;
    44.                 option.textContent = device;
    45.                 deviceSelect.appendChild(option);
    46.             }
    47.  
    48.             // 创建显示MAC地址的元素
    49.             const macDisplay = document.createElement('p');
    50.             macDisplay.id = `macDisplay${deviceCount}`;
    51.  
    52.             // 创建输入框
    53.             const uploadRateInput = document.createElement('input');
    54.             uploadRateInput.type = 'text';
    55.             uploadRateInput.placeholder = '上行速率';
    56.  
    57.             const downloadRateInput = document.createElement('input');
    58.             downloadRateInput.type = 'text';
    59.             downloadRateInput.placeholder = '下行速率';
    60.  
    61.             // 在容器中增加元素
    62.             devicesContainer.appendChild(deviceSelect);
    63.             devicesContainer.appendChild(macDisplay);
    64.             devicesContainer.appendChild(uploadRateInput);
    65.             devicesContainer.appendChild(downloadRateInput);
    66.         }
    67.  
    68.         // 设备选择框变化时的处理函数
    69.         function showMacAndRates(event) {
    70.             // 获取选择的设备名
    71.             const selectedDevice = event.target.value;
    72.             // 获取设备对应的MAC地址
    73.             const macAddress = deviceData[selectedDevice];
    74.             // 显示MAC地址
    75.             const macDisplayId = `macDisplay${deviceCount}`;
    76.             const macDisplay = document.getElementById(macDisplayId);
    77.             macDisplay.textContent = `MAC地址: ${macAddress}`;
    78.         }
    79.     </script>
    80.  
    81.     <button onclick="addDevice()">增加</button>
    82.     <button onclick="collapseInputs()">取消</button>
    83.     <button onclick="submitPostRequest()">提交</button>
    84.  
    85.     <script>
    86.         // 取消按钮的点击事件处理函数
    87.         function collapseInputs() {
    88.             // 清空容器
    89.             devicesContainer.innerHTML = '';
    90.         }
    91.  
    92.         // 提交POST请求的函数
    93.         function submitPostRequest() {
    94.             // 获取用户输入的值
    95.             const uploadRate = document.getElementById('uploadRate').value;
    96.             const downloadRate = document.getElementById('downloadRate').value;
    97.  
    98.             // 构造要提交的数据
    99.             const postData = {
    100.                 device: document.getElementById(`deviceSelect${deviceCount}`).value,
    101.                 uploadRate: uploadRate,
    102.                 downloadRate: downloadRate
    103.             };
    104.  
    105.             // 模拟提交POST请求，你需要将下面的部分替换为实际的后端API请求
    106.             console.log('模拟提交POST请求:', postData);
    107.             // 此处可以使用fetch或其他AJAX方法向后端发送POST请求
    108.         }
    109.     </script>
    110. </body>
    111. </html>

    运行效果：

    需求5：

    一开始页面只有一个增加按钮，没有提交和取消按钮，当点击增加按钮的时候，才会根据后端传过来的设备名:DESKTOP-4DQRGQB，以及mac:e0:be:03:74:40:0b；iQOO-8，mac:b0:33:66:38:c3:25，用web option是动态增加的，当select选择设备名字时，下面一个框显示对应mac的地址，在mac地址下面有2个输入框，分别是上行速率和下行速率，需要我们手动输入，这个时候页面只有提交按钮和取消按钮，然后点击提交按钮可以提交post请求，点击取消按钮就会折叠起来，不提交请求，变回之前的只有一个增加按钮.。

    代码如下：

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4.     <title>动态设置设备信息</title>
    5. </head>
    6. <body>
    7.     <td>设备选择：</td>
    8.     <td colspan="2">
    9.         <select style="width: 220px" size="1" id="deviceSelect" name="deviceSelect" onChange="showDeviceInfo();">
    10.             <!-- 设备选项由后端动态生成 -->
    11.             <option value="DESKTOP-4DQRGQB">DESKTOP-4DQRGQB</option>
    12.             <option value="iQOO-8">iQOO-8</option>
    13.         </select>
    14.         <br>
    15.  
    16.         <div id="deviceInfo" style="display: none;">
    17.             <p id="macAddress"></p>
    18.             <label for="uploadRate">上行速率：</label>
    19.             <input type="text" id="uploadRate" name="uploadRate">
    20.             <br>
    21.             <label for="downloadRate">下行速率：</label>
    22.             <input type="text" id="downloadRate" name="downloadRate">
    23.             <br>
    24.             <button onclick="submitForm()">提交</button>
    25.             <button onclick="cancelForm()">取消</button>
    26.         </div>
    27.     </td>
    28.  
    29.     <script>
    30.         function showDeviceInfo() {
    31.             // 获取选中的设备名
    32.             var selectedDevice = document.getElementById("deviceSelect").value;
    33.  
    34.             // 模拟从后端获取对应的MAC地址
    35.             var macAddress;
    36.             if (selectedDevice === "DESKTOP-4DQRGQB") {
    37.                 macAddress = "e0:be:03:74:40:0b";
    38.             } else if (selectedDevice === "iQOO-8") {
    39.                 macAddress = "b0:33:66:38:c3:25";
    40.             }
    41.  
    42.             // 显示MAC地址和输入框
    43.             document.getElementById("macAddress").innerHTML = "MAC地址：" + macAddress;
    44.             document.getElementById("deviceInfo").style.display = "block";
    45.         }
    46.  
    47.         function submitForm() {
    48.             // 获取用户输入的上行速率和下行速率
    49.             var uploadRate = document.getElementById("uploadRate").value;
    50.             var downloadRate = document.getElementById("downloadRate").value;
    51.  
    52.             // 模拟提交操作，这里用alert弹窗展示输入信息
    53.             alert("提交成功\n上行速率：" + uploadRate + "\n下行速率：" + downloadRate);
    54.         }
    55.  
    56.         function cancelForm() {
    57.             // 隐藏设备信息框
    58.             document.getElementById("deviceInfo").style.display = "none";
    59.         }
    60.     </script>
    61. </body>
    62. </html>

    运行效果：

    需求6：一开始页面只有一个增加按钮，没有提交和取消按钮，当点击增加按钮的时候，才会根据后端传过来的设备名:DESKTOP-4DQRGQB，以及mac:e0:be:03:74:40:0b；iQOO-8，mac:b0:33:66:38:c3:25，用web option是动态增加的，当select选择设备名字时，下面一个框显示对应mac的地址，在mac地址下面有2个输入框，分别是上行限速和下行限速，需要我们手动输入，这个时候页面只有提交按钮和取消按钮，然后点击提交按钮可以提交post请求，点击取消按钮就会变为初始状态，只有一个增加按钮。

    代码如下：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>动态添加设备信息</title>
    7.     <style>
    8.         .hidden {
    9.             display: none;
    10.         }
    11.     </style>
    12. </head>
    13. <body>
    14.  
    15.     <div id="devices">
    16.         <button onclick="addDevice()">增加</button>
    17.     </div>
    18.  
    19.     <div id="deviceInfo" class="hidden">
    20.         <p id="macAddress"></p>
    21.         <label for="uploadLimit">上行限速：</label>
    22.         <input type="text" id="uploadLimit" name="uploadLimit">
    23.         <br>
    24.         <label for="downloadLimit">下行限速：</label>
    25.         <input type="text" id="downloadLimit" name="downloadLimit">
    26.         <br>
    27.         <button onclick="submitForm()">提交</button>
    28.         <button onclick="cancelForm()">取消</button>
    29.     </div>
    30.  
    31.     <script>
    32.         function addDevice() {
    33.             // 模拟从后端获取设备列表
    34.             var devices = [
    35.                 { value: "DESKTOP-4DQRGQB", label: "DESKTOP-4DQRGQB" },
    36.                 { value: "iQOO-8", label: "iQOO-8" }
    37.             ];
    38.  
    39.             // 创建设备选择下拉框
    40.             var select = document.createElement("select");
    41.             select.id = "deviceSelect";
    42.             for (var i = 0; i < devices.length; i++) {
    43.                 var option = document.createElement("option");
    44.                 option.value = devices[i].value;
    45.                 option.text = devices[i].label;
    46.                 select.appendChild(option);
    47.             }
    48.  
    49.             // 将设备选择下拉框添加到页面中
    50.             document.getElementById("devices").innerHTML = ""; // 清空原有内容
    51.             document.getElementById("devices").appendChild(select);
    52.  
    53.             // 显示设备信息框
    54.             document.getElementById("deviceInfo").classList.remove("hidden");
    55.  
    56.             // 监听设备选择事件
    57.             select.addEventListener("change", showDeviceInfo);
    58.         }
    59.  
    60.         function showDeviceInfo() {
    61.             // 获取选中的设备名
    62.             var selectedDevice = document.getElementById("deviceSelect").value;
    63.  
    64.             // 模拟从后端获取对应的MAC地址
    65.             var macAddress;
    66.             if (selectedDevice === "DESKTOP-4DQRGQB") {
    67.                 macAddress = "e0:be:03:74:40:0b";
    68.             } else if (selectedDevice === "iQOO-8") {
    69.                 macAddress = "b0:33:66:38:c3:25";
    70.             }
    71.  
    72.             // 显示MAC地址
    73.             document.getElementById("macAddress").innerHTML = "MAC地址：" + macAddress;
    74.         }
    75.  
    76.         function submitForm() {
    77.             // 获取用户输入的上行限速和下行限速
    78.             var uploadLimit = document.getElementById("uploadLimit").value;
    79.             var downloadLimit = document.getElementById("downloadLimit").value;
    80.  
    81.             // 模拟提交操作，这里用alert弹窗展示输入信息
    82.             alert("提交成功\n上行限速：" + uploadLimit + "\n下行限速：" + downloadLimit);
    83.  
    84.             // 隐藏设备信息框
    85.             document.getElementById("deviceInfo").classList.add("hidden");
    86.         }
    87.  
    88.         function cancelForm() {
    89.             // 隐藏设备信息框
    90.             document.getElementById("deviceInfo").classList.add("hidden");
    91.  
    92.             // 恢复初始状态，只有一个增加按钮
    93.             var addBtn = document.createElement("button");
    94.             addBtn.textContent = "增加";
    95.             addBtn.onclick = addDevice;
    96.             document.getElementById("devices").innerHTML = "";
    97.             document.getElementById("devices").appendChild(addBtn);
    98.         }
    99.     </script>
    100. </body>
    101. </html>

    运行效果：

    ​​​​​​​

    点击取消后变未初始状态：

  • 相关阅读:
    Docker数据管理
    Redis之与SSM集成Spring注解式缓存
    innodb不同场景下加锁分析总结
    MetaCost与重采样结合的不平衡分类算法——RS-MetaCost
    8年软件测试感悟，送给刚入测试行业的小伙伴
    nginx $uri导致的CRLF注入漏洞
    【STM32】标准库-自定义BootLoader
    如何用画图将另一个图片中的成分复制粘贴？
    SQL：from、where、group by、having、order by的书写与执行顺序
    构建基于 Ingress 的全链路灰度能力
  • 原文地址：https://blog.csdn.net/buhuidage/article/details/134564667