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

web需求记录

news 2026/2/15 8:59:45

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

代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>选择设备和显示MAC地址</title>
</head>
<body><label for="deviceSelect">设备选择：</label><select id="deviceSelect" onchange="updateMacAddress()"><!-- options will be added dynamically --></select><div id="macAddressDisplay">MAC地址：未选择设备</div><script>// 后端传递的设备名和对应的MAC地址const deviceData = {'DESKTOP-4DQRGQB': 'e0:be:03:74:40:0b','iQOO-8': 'b0:33:66:38:c3:25','iQO0-7': 'b0:33:66:38:c3:2','iQOO-6': 'b0:33:66:38:c3:3',// 添加更多设备的MAC地址};// 获取选择设备的select元素const deviceSelect = document.getElementById('deviceSelect');// 初始化select中的optionsfor (const device in deviceData) {const option = document.createElement('option');option.value = device;option.textContent = device;deviceSelect.appendChild(option);}// 更新MAC地址显示框的函数function updateMacAddress() {// 获取选择的设备名const selectedDevice = deviceSelect.value;// 获取对应设备的MAC地址const macAddress = deviceData[selectedDevice] || '未知';// 更新MAC地址显示框的内容document.getElementById('macAddressDisplay').textContent = `MAC地址：${macAddress}`;}// 初始页面加载时调用一次，确保显示默认值updateMacAddress();</script>
</body>
</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请求。

代码如下：

```html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>选择设备和显示MAC地址、速率</title>
</head>
<body><label for="deviceSelect">设备选择：</label><select id="deviceSelect" onchange="updateDeviceInfo()"><!-- options will be added dynamically --></select><div><p id="macAddressDisplay">MAC地址：未选择设备</p><label for="uploadRate">上行速率：</label><input type="text" id="uploadRate"><label for="downloadRate">下行速率：</label><input type="text" id="downloadRate"></div><div><button onclick="submitPostRequest()">提交</button></div><script>// 后端传递的设备名和对应的MAC地址const deviceData = {'DESKTOP-4DQRGQB': 'e0:be:03:74:40:0b','iQOO-8': 'b0:33:66:38:c3:25',// 添加更多设备的MAC地址};// 获取选择设备的select元素const deviceSelect = document.getElementById('deviceSelect');// 初始化select中的optionsfor (const device in deviceData) {const option = document.createElement('option');option.value = device;option.textContent = device;deviceSelect.appendChild(option);}// 更新设备信息的函数function updateDeviceInfo() {// 获取选择的设备名const selectedDevice = deviceSelect.value;// 获取对应设备的MAC地址const macAddress = deviceData[selectedDevice] || '未知';// 更新MAC地址显示框的内容document.getElementById('macAddressDisplay').textContent = `MAC地址：${macAddress}`;}// 提交POST请求的函数function submitPostRequest() {// 获取用户输入的值const uploadRate = document.getElementById('uploadRate').value;const downloadRate = document.getElementById('downloadRate').value;// 获取选择的设备名const selectedDevice = deviceSelect.value;// 获取对应设备的MAC地址const macAddress = deviceData[selectedDevice] || '未知';// 构造要提交的数据const postData = {device: selectedDevice,mac: macAddress,uploadRate: uploadRate,downloadRate: downloadRate};// 模拟提交POST请求，你需要将下面的部分替换为实际的后端API请求console.log('模拟提交POST请求:', postData);// 此处可以使用fetch或其他AJAX方法向后端发送POST请求}</script>
</body>
</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请求，点击取消按钮就会折叠起来，不提交请求。

代码如下：

```html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>选择设备和显示MAC地址、速率</title><style>.hidden {display: none;}</style>
</head>
<body><label for="deviceSelect">设备选择：</label><select id="deviceSelect" onchange="updateDeviceInfo()"><!-- options will be added dynamically --></select><div><p id="macAddressDisplay">MAC地址：未选择设备</p><div id="rateInputs" class="hidden"><label for="uploadRate">上行速率：</label><input type="text" id="uploadRate"><label for="downloadRate">下行速率：</label><input type="text" id="downloadRate"></div></div><div><button onclick="expandInputs()">增加</button><button onclick="collapseInputs()">取消</button><button onclick="submitPostRequest()">提交</button></div><script>// 后端传递的设备名和对应的MAC地址const deviceData = {'DESKTOP-4DQRGQB': 'e0:be:03:74:40:0b','iQOO-8': 'b0:33:66:38:c3:25',// 添加更多设备的MAC地址};// 获取选择设备的select元素const deviceSelect = document.getElementById('deviceSelect');// 初始化select中的optionsfor (const device in deviceData) {const option = document.createElement('option');option.value = device;option.textContent = device;deviceSelect.appendChild(option);}// 更新设备信息的函数function updateDeviceInfo() {// 获取选择的设备名const selectedDevice = deviceSelect.value;// 获取对应设备的MAC地址const macAddress = deviceData[selectedDevice] || '未知';// 更新MAC地址显示框的内容document.getElementById('macAddressDisplay').textContent = `MAC地址：${macAddress}`;// 显示输入框document.getElementById('rateInputs').classList.remove('hidden');}// 增加按钮的点击事件处理函数function expandInputs() {// 显示输入框document.getElementById('rateInputs').classList.remove('hidden');}// 取消按钮的点击事件处理函数function collapseInputs() {// 隐藏输入框document.getElementById('rateInputs').classList.add('hidden');}// 提交POST请求的函数function submitPostRequest() {// 获取用户输入的值const uploadRate = document.getElementById('uploadRate').value;const downloadRate = document.getElementById('downloadRate').value;// 获取选择的设备名const selectedDevice = deviceSelect.value;// 获取对应设备的MAC地址const macAddress = deviceData[selectedDevice] || '未知';// 构造要提交的数据const postData = {device: selectedDevice,mac: macAddress,uploadRate: uploadRate,downloadRate: downloadRate};// 模拟提交POST请求，你需要将下面的部分替换为实际的后端API请求console.log('模拟提交POST请求:', postData);// 此处可以使用fetch或其他AJAX方法向后端发送POST请求}</script>
</body>
</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请求，点击取消按钮就会折叠起来，不提交请求。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>动态增加设备</title><style>.hidden {display: none;}</style>
</head>
<body><div id="devicesContainer"></div><script>// 后端传递的设备名和对应的MAC地址const deviceData = {'DESKTOP-4DQRGQB': 'e0:be:03:74:40:0b','iQOO-8': 'b0:33:66:38:c3:25',// 添加更多设备的MAC地址};// 用于计数的变量let deviceCount = 0;// 获取容器元素const devicesContainer = document.getElementById('devicesContainer');// 初始化设备选择框function addDevice() {// 增加设备数计数deviceCount++;// 创建设备选择框const deviceSelect = document.createElement('select');deviceSelect.id = `deviceSelect${deviceCount}`;deviceSelect.addEventListener('change', showMacAndRates);// 初始化设备选择框的optionsfor (const device in deviceData) {const option = document.createElement('option');option.value = device;option.textContent = device;deviceSelect.appendChild(option);}// 创建显示MAC地址的元素const macDisplay = document.createElement('p');macDisplay.id = `macDisplay${deviceCount}`;// 创建输入框const uploadRateInput = document.createElement('input');uploadRateInput.type = 'text';uploadRateInput.placeholder = '上行速率';const downloadRateInput = document.createElement('input');downloadRateInput.type = 'text';downloadRateInput.placeholder = '下行速率';// 在容器中增加元素devicesContainer.appendChild(deviceSelect);devicesContainer.appendChild(macDisplay);devicesContainer.appendChild(uploadRateInput);devicesContainer.appendChild(downloadRateInput);}// 设备选择框变化时的处理函数function showMacAndRates(event) {// 获取选择的设备名const selectedDevice = event.target.value;// 获取设备对应的MAC地址const macAddress = deviceData[selectedDevice];// 显示MAC地址const macDisplayId = `macDisplay${deviceCount}`;const macDisplay = document.getElementById(macDisplayId);macDisplay.textContent = `MAC地址: ${macAddress}`;}</script><button onclick="addDevice()">增加</button><button onclick="collapseInputs()">取消</button><button onclick="submitPostRequest()">提交</button><script>// 取消按钮的点击事件处理函数function collapseInputs() {// 清空容器devicesContainer.innerHTML = '';}// 提交POST请求的函数function submitPostRequest() {// 获取用户输入的值const uploadRate = document.getElementById('uploadRate').value;const downloadRate = document.getElementById('downloadRate').value;// 构造要提交的数据const postData = {device: document.getElementById(`deviceSelect${deviceCount}`).value,uploadRate: uploadRate,downloadRate: downloadRate};// 模拟提交POST请求，你需要将下面的部分替换为实际的后端API请求console.log('模拟提交POST请求:', postData);// 此处可以使用fetch或其他AJAX方法向后端发送POST请求}</script>
</body>
</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请求，点击取消按钮就会折叠起来，不提交请求，变回之前的只有一个增加按钮.。

代码如下：

<!DOCTYPE html>
<html>
<head><title>动态设置设备信息</title>
</head>
<body><td>设备选择：</td><td colspan="2"><select style="width: 220px" size="1" id="deviceSelect" name="deviceSelect" onChange="showDeviceInfo();"><!-- 设备选项由后端动态生成 --><option value="DESKTOP-4DQRGQB">DESKTOP-4DQRGQB</option><option value="iQOO-8">iQOO-8</option></select><br><div id="deviceInfo" style="display: none;"><p id="macAddress"></p><label for="uploadRate">上行速率：</label><input type="text" id="uploadRate" name="uploadRate"><br><label for="downloadRate">下行速率：</label><input type="text" id="downloadRate" name="downloadRate"><br><button onclick="submitForm()">提交</button><button onclick="cancelForm()">取消</button></div></td><script>function showDeviceInfo() {// 获取选中的设备名var selectedDevice = document.getElementById("deviceSelect").value;// 模拟从后端获取对应的MAC地址var macAddress;if (selectedDevice === "DESKTOP-4DQRGQB") {macAddress = "e0:be:03:74:40:0b";} else if (selectedDevice === "iQOO-8") {macAddress = "b0:33:66:38:c3:25";}// 显示MAC地址和输入框document.getElementById("macAddress").innerHTML = "MAC地址：" + macAddress;document.getElementById("deviceInfo").style.display = "block";}function submitForm() {// 获取用户输入的上行速率和下行速率var uploadRate = document.getElementById("uploadRate").value;var downloadRate = document.getElementById("downloadRate").value;// 模拟提交操作，这里用alert弹窗展示输入信息alert("提交成功\n上行速率：" + uploadRate + "\n下行速率：" + downloadRate);}function cancelForm() {// 隐藏设备信息框document.getElementById("deviceInfo").style.display = "none";}</script>
</body>
</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请求，点击取消按钮就会变为初始状态，只有一个增加按钮。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>动态添加设备信息</title><style>.hidden {display: none;}</style>
</head>
<body><div id="devices"><button onclick="addDevice()">增加</button></div><div id="deviceInfo" class="hidden"><p id="macAddress"></p><label for="uploadLimit">上行限速：</label><input type="text" id="uploadLimit" name="uploadLimit"><br><label for="downloadLimit">下行限速：</label><input type="text" id="downloadLimit" name="downloadLimit"><br><button onclick="submitForm()">提交</button><button onclick="cancelForm()">取消</button></div><script>function addDevice() {// 模拟从后端获取设备列表var devices = [{ value: "DESKTOP-4DQRGQB", label: "DESKTOP-4DQRGQB" },{ value: "iQOO-8", label: "iQOO-8" }];// 创建设备选择下拉框var select = document.createElement("select");select.id = "deviceSelect";for (var i = 0; i < devices.length; i++) {var option = document.createElement("option");option.value = devices[i].value;option.text = devices[i].label;select.appendChild(option);}// 将设备选择下拉框添加到页面中document.getElementById("devices").innerHTML = ""; // 清空原有内容document.getElementById("devices").appendChild(select);// 显示设备信息框document.getElementById("deviceInfo").classList.remove("hidden");// 监听设备选择事件select.addEventListener("change", showDeviceInfo);}function showDeviceInfo() {// 获取选中的设备名var selectedDevice = document.getElementById("deviceSelect").value;// 模拟从后端获取对应的MAC地址var macAddress;if (selectedDevice === "DESKTOP-4DQRGQB") {macAddress = "e0:be:03:74:40:0b";} else if (selectedDevice === "iQOO-8") {macAddress = "b0:33:66:38:c3:25";}// 显示MAC地址document.getElementById("macAddress").innerHTML = "MAC地址：" + macAddress;}function submitForm() {// 获取用户输入的上行限速和下行限速var uploadLimit = document.getElementById("uploadLimit").value;var downloadLimit = document.getElementById("downloadLimit").value;// 模拟提交操作，这里用alert弹窗展示输入信息alert("提交成功\n上行限速：" + uploadLimit + "\n下行限速：" + downloadLimit);// 隐藏设备信息框document.getElementById("deviceInfo").classList.add("hidden");}function cancelForm() {// 隐藏设备信息框document.getElementById("deviceInfo").classList.add("hidden");// 恢复初始状态，只有一个增加按钮var addBtn = document.createElement("button");addBtn.textContent = "增加";addBtn.onclick = addDevice;document.getElementById("devices").innerHTML = "";document.getElementById("devices").appendChild(addBtn);}</script>
</body>
</html>

运行效果：

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

再次点击增加，会发现有bug,之前输入的东西没有清空。

需求7:

一开始页面只有一个增加按钮，没有提交和取消按钮，当点击增加按钮的时候，才会根据后端传过来的设备名: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请求，点击取消按钮就会变为初始状态，清空之前的输入。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>动态添加设备信息</title><style>.hidden {display: none;}</style>
</head>
<body><div id="devices"><button onclick="addDevice()">增加</button></div><div id="deviceInfo" class="hidden"><p id="macAddress"></p><label for="uploadLimit">上行限速：</label><input type="text" id="uploadLimit" name="uploadLimit"><br><label for="downloadLimit">下行限速：</label><input type="text" id="downloadLimit" name="downloadLimit"><br><button onclick="submitForm()">提交</button><button onclick="cancelForm()">取消</button></div><script>function addDevice() {// 模拟从后端获取设备列表var devices = [{ value: "DESKTOP-4DQRGQB", label: "DESKTOP-4DQRGQB" },{ value: "iQOO-8", label: "iQOO-8" }// 可以添加更多设备...];// 创建设备选择下拉框var select = document.createElement("select");select.id = "deviceSelect";for (var i = 0; i < devices.length; i++) {var option = document.createElement("option");option.value = devices[i].value;option.text = devices[i].label;select.appendChild(option);}// 将设备选择下拉框添加到页面中document.getElementById("devices").innerHTML = ""; // 清空原有内容document.getElementById("devices").appendChild(select);// 显示设备信息框document.getElementById("deviceInfo").classList.remove("hidden");// 监听设备选择事件select.addEventListener("change", showDeviceInfo);}function showDeviceInfo() {// 获取选中的设备名var selectedDevice = document.getElementById("deviceSelect").value;// 模拟从后端获取对应的MAC地址var macAddress;if (selectedDevice === "DESKTOP-4DQRGQB") {macAddress = "e0:be:03:74:40:0b";} else if (selectedDevice === "iQOO-8") {macAddress = "b0:33:66:38:c3:25";}// 显示MAC地址document.getElementById("macAddress").innerHTML = "MAC地址：" + macAddress;}function submitForm() {// 获取用户输入的上行限速和下行限速var uploadLimit = document.getElementById("uploadLimit").value;var downloadLimit = document.getElementById("downloadLimit").value;// 模拟提交操作，这里用alert弹窗展示输入信息alert("提交成功\n上行限速：" + uploadLimit + "\n下行限速：" + downloadLimit);// 隐藏设备信息框document.getElementById("deviceInfo").classList.add("hidden");resetPage();}function cancelForm() {// 隐藏设备信息框document.getElementById("deviceInfo").classList.add("hidden");resetPage();}function resetPage() {// 恢复初始状态，只有一个增加按钮var addBtn = document.createElement("button");addBtn.textContent = "增加";addBtn.onclick = addDevice;document.getElementById("devices").innerHTML = "";document.getElementById("devices").appendChild(addBtn);// 清空之前的输入document.getElementById("uploadLimit").value = "";document.getElementById("downloadLimit").value = "";}</script>
</body>
</html>

运行效果：

点击取消，然后再点增加，会清空里面的数据。

需求8：

一开始页面只有一个增加按钮，没有提交和取消按钮，当点击增加按钮的时候，才会根据后端传过来的设备名: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请求，点击取消按钮就会变为初始状态，清空之前的输入。注：选择设备名字时旁边弄设备选择这几个字。

代码如下：

<!DOCTYPE html>
<html>
<head><title>设备信息提交</title><style>.hidden {display: none;}</style>
</head>
<body><button id="addButton" onclick="addDevice()">增加</button><div id="deviceInfo" class="hidden"><label for="deviceSelect">设备选择：</label><select id="deviceSelect" onchange="showDeviceInfo()"><!-- 动态生成设备选项 --></select><br><label for="macAddress">MAC地址：</label><input type="text" id="macAddress" readonly><br><label for="uploadSpeed">上行限速：</label><input type="text" id="uploadSpeed"><br><label for="downloadSpeed">下行限速：</label><input type="text" id="downloadSpeed"><br><button onclick="submitDeviceInfo()">提交</button><button onclick="cancel()">取消</button>
</div><script>var devices = [{ value: "DESKTOP-4DQRGQB", mac: "e0:be:03:74:40:0b" },{ value: "iQOO-8", mac: "b0:33:66:38:c3:25" }// 添加更多设备...];var addButton = document.getElementById("addButton");var deviceInfo = document.getElementById("deviceInfo");var deviceSelect = document.getElementById("deviceSelect");var macAddressInput = document.getElementById("macAddress");var uploadSpeedInput = document.getElementById("uploadSpeed");var downloadSpeedInput = document.getElementById("downloadSpeed");// 动态生成设备选项devices.forEach(function(device) {var option = document.createElement("option");option.value = device.value;option.text = device.value;deviceSelect.add(option);});function addDevice() {deviceInfo.classList.remove("hidden");}function showDeviceInfo() {var selectedDevice = deviceSelect.value;var selectedDeviceObj = devices.find(device => device.value === selectedDevice);if (selectedDeviceObj) {macAddressInput.value = selectedDeviceObj.mac;uploadSpeedInput.value = "";downloadSpeedInput.value = "";}}function submitDeviceInfo() {var selectedDevice = deviceSelect.value;var macAddress = macAddressInput.value;var uploadSpeed = uploadSpeedInput.value;var downloadSpeed = downloadSpeedInput.value;// 模拟提交数据到后端console.log("提交数据到后端：", selectedDevice, macAddress, uploadSpeed, downloadSpeed);// 提交完成后隐藏设备信息框cancel();}function cancel() {deviceInfo.classList.add("hidden");deviceSelect.value = "";macAddressInput.value = "";uploadSpeedInput.value = "";downloadSpeedInput.value = "";}
</script></body>
</html>

运行效果：

点击取消再次增加，唯一有的bug就是多了增加按钮。

需求9：一开始页面只有一个增加按钮，没有提交和取消按钮，当点击增加按钮的时候，才会根据后端传过来的设备名: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请求，点击取消按钮就会变为初始状态，清空之前的输入。

代码如下：

<!DOCTYPE html>
<html>
<head><title>设备信息提交</title><style>.hidden {display: none;}#deviceInfo {margin-top: 10px;}</style>
</head>
<body><div id="deviceInfo" class="hidden"><label for="deviceSelect">设备选择：</label><select id="deviceSelect" onchange="showDeviceInfo()"><!-- 动态生成设备选项 --></select><br><label for="macAddress">MAC地址：</label><input type="text" id="macAddress" readonly><br><label for="uploadSpeed">上行限速：</label><input type="text" id="uploadSpeed"><br><label for="downloadSpeed">下行限速：</label><input type="text" id="downloadSpeed"><br><button onclick="submitDeviceInfo()">提交</button><button onclick="cancel()">取消</button>
</div><button id="addButton" onclick="addDevice()">增加</button><script>var devices = [{ value: "DESKTOP-4DQRGQB", mac: "e0:be:03:74:40:0b" },{ value: "iQOO-8", mac: "b0:33:66:38:c3:25" }// 添加更多设备...];var deviceInfo = document.getElementById("deviceInfo");var deviceSelect = document.getElementById("deviceSelect");var macAddressInput = document.getElementById("macAddress");var uploadSpeedInput = document.getElementById("uploadSpeed");var downloadSpeedInput = document.getElementById("downloadSpeed");var addButton = document.getElementById("addButton");// 动态生成设备选项devices.forEach(function(device) {var option = document.createElement("option");option.value = device.value;option.text = device.value;deviceSelect.add(option);});function showDeviceInfo() {var selectedDevice = deviceSelect.value;var selectedDeviceObj = devices.find(device => device.value === selectedDevice);if (selectedDeviceObj) {macAddressInput.value = selectedDeviceObj.mac;uploadSpeedInput.value = "";downloadSpeedInput.value = "";}}function submitDeviceInfo() {var selectedDevice = deviceSelect.value;var macAddress = macAddressInput.value;var uploadSpeed = uploadSpeedInput.value;var downloadSpeed = downloadSpeedInput.value;// 模拟提交数据到后端console.log("提交数据到后端：", selectedDevice, macAddress, uploadSpeed, downloadSpeed);// 提交完成后隐藏设备信息框cancel();}function cancel() {deviceInfo.classList.add("hidden");deviceSelect.value = "";macAddressInput.value = "";uploadSpeedInput.value = "";downloadSpeedInput.value = "";addButton.style.display = "inline-block";}function addDevice() {deviceInfo.classList.remove("hidden");addButton.style.display = "none";}
</script></body>
</html>

运行效果：

提前请求：

点击需求再次增加，满足要求。

相关文章：

web需求记录

需求1&#xff1a;根据后端传过来的设备名:DESKTOP-4DQRGQB&#xff0c;以及mac:e0:be:03:74:40:0b&#xff1b;iQOO-8&#xff0c;mac:b0:33:66:38:c3:25&#xff0c;用web option 是动态增加的&#xff08;也就是那个选择框里面的东西是根据后端传过来的值动态增加的&#xf…...

编程日记 2023/11/23 6:14:34

[网鼎杯 2018]Fakebook

[网鼎杯 2018]Fakebook 打开环境出现一个登录注册的页面 在登录和注册中发现 了地址栏出现变化&#xff0c;扫一波看看 看看robots.txt和flag.php 访问robots.txt看看 再访问user.php.bak <?php class UserInfo { public $name ""; public …...

编程日记 2023/11/23 6:13:33

微信小程序蓝牙连接 uniApp蓝牙连接设备

蓝牙列表期待效果 代码 <template><view class"bluetooth-list"><view class"align-items option" style"justify-content: space-between;" v-for"item in bluetoothList" :key"item.deviceId"><vie…...

编程日记 2023/11/23 6:12:32

启动Dubbo项目注册Zookeeper时提示zookeeper not connected异常原理解析

原创/朱季谦 遇到一个很诡异的问题&#xff0c;我在启动多个配置相同zookeeper的Dubbo项目时&#xff0c;其他项目都是正常启动&#xff0c;唯独有一个项目在启动过程中&#xff0c;Dubbo注册zookeeper协议时&#xff0c;竟然出现了这样的异常提示—— Caused by: java.lang.…...

编程日记 2023/11/23 6:11:31

我在Vscode学OpenCV 几何变换（缩放、翻转、仿射变换、透视、重映射）

几何变换指的是将一幅图像映射到另一幅图像内的操作。 cv2.warpAffine&#xff1a;使用仿射变换矩阵对图像进行变换&#xff0c;可以实现平移、缩放和旋转等操作。cv2.warpPerspective&#xff1a;使用透视变换矩阵对图像进行透视变换&#xff0c;可以实现镜头校正、图像纠偏等…...

编程日记 2023/11/23 6:10:30

MATLAB算法实战应用案例精讲-【图像处理】图像缩放

目录 前言 知识储备 MATLAB图像处理函数 数字数字图像增强 数字数字图像的变换...

编程日记 2023/11/23 6:09:29

Doris的PROPERTIES与ENGINE（九）

接上篇----------Doris分区与分桶 在建表语句的最后 PROPERTIES 中&#xff0c;可以指定以下两个参数&#xff1a; replication_num 每个 Tablet 的副本数量。默认为 3&#xff0c;建议保持默认即可。在建表语句中&#xff0c;所有 Partition 中的 Tablet 副本数量统一指定。…...

编程日记 2023/11/23 6:08:28

华为云数据库 RDS 下载全量备份文件 wget

地址下载 wget -O FILE_NAME --no-check-certificate "DOWNLOAD_URL"FILE_NAME&#xff1a;重命名&#xff0c;例如mysql1121.qpDOWNLOAD_URL: 地址下载 参考 华为云数据库 RDS 下载全量备份文件...

编程日记 2023/11/23 6:07:27

C#使用whisper.net实现语音识别（语音转文本）

目录 介绍 效果 输出信息 项目 代码 下载 介绍 github地址&#xff1a;https://github.com/sandrohanea/whisper.net Whisper.net. Speech to text made simple using Whisper Models 模型下载地址&#xff1a;https://huggingface.co/sandrohanea/whisper.net/tree…...

编程日记 2023/11/23 6:06:25

从零开始学习typescript——运算符(算术运算符、赋值运算符、比较运算符)

算术运算符 算术运算符主要是针对数值类型和长整型&#xff1b;包括有加法、减法、乘法、除法、自增、自减等运算 加法&#xff08;&#xff09; let x:number1let y:number 2console.log(xy)减法&#xff08;-&#xff09; let x:number1let y:number 2console.log(y-x)乘法…...

编程日记 2023/11/23 6:05:25

likeshop单商户商城系统 任意文件上传漏洞复现

0x01 产品简介 likeshop单商户标准商城系统适用于B2C、单商户、自营商城场景。完美契合私域流量变现闭环交易使用。 系统拥有丰富的营销玩法&#xff0c;强大的分销能力&#xff0c;支持电子面单和小程序直播等功能。无论运营还是二开都是性价比极高的100%开源商城系统。 0x02…...

编程日记 2023/11/23 6:04:23

CentOS 7 使用pugixml 库

安装 pugixml Git下载地址&#xff1a;https://github.com/zeux/pugixml 步骤1&#xff1a;首先&#xff0c;你需要下载pugixml 的源代码。你可以从Github或者源代码官方网站下载。并上传至/usr/local/source_code/ 步骤2&#xff1a;下载完成后&#xff0c;需要将源代码解压…...

编程日记 2023/11/23 6:03:22

深度学习 loss 是nan的可能原因

1 loss 损失值非常大&#xff0c;超过了浮点数的范围&#xff0c;所以表示为overflow 状态下的男。 解决办法&#xff1a; 减小学习率&#xff0c;观察loss值是不是还是nan 在将数据输入模型前&#xff0c;进行恰当的归一化 缩放 2 loss 的计算中存在除以0&#xff0c; log(0…...

编程日记 2023/11/23 6:02:21

[ 云计算 | AWS 实践 ] 基于 Amazon S3 协议搭建个人云存储服务

本文收录于【#云计算入门与实践 - AWS】专栏中&#xff0c;收录 AWS 入门与实践相关博文。 本文同步于个人公众号&#xff1a;【云计算洞察】 更多关于云计算技术内容敬请关注&#xff1a;CSDN【#云计算入门与实践 - AWS】专栏。 本系列已更新博文&#xff1a; [ 云计算 | …...

编程日记 2023/11/23 6:01:21

第二十章：多线程

进程 线程的特点 1.进程是资源分配的最小单位&#xff0c;线程是最小的执行单位 2.一个进程可以有多个线程 3.线程共享进程资源 package twentyth; public class ThreadTest extends Thread { public void run() { for (int i 1; i < 10; i) {//继承重…...

编程日记 2023/11/23 6:00:20

CentOS 7启动时报“Started Crash recovery kernel arming.....shutdown....”问题处理过程

有台虚拟机由于CPU负载过高而宕机&#xff0c;宕机重启后停在“Started Crash recovery kernel arming…shutdown…”阶段&#xff0c;如下所示&#xff1a; 重置虚拟机&#xff0c;进入grub菜单&#xff0c;按e编辑启动选项&#xff0c;在linux16 行末&#xff0c;加上&…...

编程日记 2023/11/23 5:59:18

Android 13 - Media框架（14）- OpenMax（二）

这一节我们将来解析 media.codec 这个 HIDL service 究竟提供了什么服务&#xff0c;服务是如何启动的。 1、main 函数 我们先来看 frameworks/av/services/mediacodec/main_codecservice.cpp&#xff1a; int main(int argc __unused, char** argv) {strcpy(argv[0], "…...

编程日记 2023/11/23 5:58:18

【Python大数据笔记_day11_Hadoop进阶之MR和YARNZooKeeper】

MR 单词统计流程 已知文件内容: hadoop hive hadoop spark hive flink hive linux hive mysql ​ input结果: k1(行偏移量) v1(每行文本内容)0 hadoop hive hadoop spark hive 30 flink hive linux hive mysql map结果:k2(split切割后的单词) v2(拼接…...

编程日记 2023/11/23 5:57:17

飞桨——总结PPOCRLabel中遇到的坑

操作系统&#xff1a;win10 python环境&#xff1a;python3.9 paddleocr项目版本&#xff1a;2.7 1.报错&#xff1a;ModuleNotFoundError: No module named Polygon&#xff08;已解决&#xff09; 已解决所以没有复现报错内容 尝试方法一&#xff1a;直接使用pip命令安装&…...

编程日记 2023/11/23 5:56:16

LeetCode（30）长度最小的子数组【滑动窗口】【中等】

目录 1.题目2.答案3.提交结果截图 链接&#xff1a; 长度最小的子数组 1.题目 给定一个含有 n 个正整数的数组和一个正整数 target 。 找出该数组中满足其总和大于等于 target 的长度最小的 连续子数组 [numsl, numsl1, ..., numsr-1, numsr] &#xff0c;并返回其长度。如果…...

编程日记 2023/11/23 5:55:15

【磁盘】每天掌握一个Linux命令 - iostat

目录 【磁盘】每天掌握一个Linux命令 - iostat工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景 注意事项 【磁盘】每天掌握一个Linux命令 - iostat 工具概述 iostat&#xff08;I/O Statistics&#xff09;是Linux系统下用于监视系统输入输出设备和CPU使…...

编程新知 2025/9/30 16:39:11

【Oracle】分区表

个人主页&#xff1a;Guiat 归属专栏&#xff1a;Oracle 文章目录 1. 分区表基础概述1.1 分区表的概念与优势1.2 分区类型概览1.3 分区表的工作原理 2. 范围分区 (RANGE Partitioning)2.1 基础范围分区2.1.1 按日期范围分区2.1.2 按数值范围分区 2.2 间隔分区 (INTERVAL Partit…...

编程新知 2026/1/20 21:59:36

2025年渗透测试面试题总结-腾讯[实习]科恩实验室-安全工程师（题目+回答）

安全领域各种资源&#xff0c;学习文档&#xff0c;以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各种好玩的项目及好用的工具&#xff0c;欢迎关注。 目录 腾讯[实习]科恩实验室-安全工程师 一、网络与协议 1. TCP三次握手 2. SYN扫描原理 3. HTTPS证书机制 二…...

编程新知 2026/1/27 2:41:27

安卓基础（Java 和 Gradle 版本）

1. 设置项目的 JDK 版本 方法1&#xff1a;通过 Project Structure File → Project Structure... (或按 CtrlAltShiftS) 左侧选择 SDK Location 在 Gradle Settings 部分&#xff0c;设置 Gradle JDK 方法2&#xff1a;通过 Settings File → Settings... (或 CtrlAltS)…...

编程新知 2025/7/10 0:32:50

零知开源——STM32F103RBT6驱动 ICM20948 九轴传感器及 vofa + 上位机可视化教程

STM32F1 本教程使用零知标准板&#xff08;STM32F103RBT6&#xff09;通过I2C驱动ICM20948九轴传感器&#xff0c;实现姿态解算&#xff0c;并通过串口将数据实时发送至VOFA上位机进行3D可视化。代码基于开源库修改优化&#xff0c;适合嵌入式及物联网开发者。在基础驱动上新增…...

编程新知 2026/2/5 4:25:58

【深度学习新浪潮】什么是credit assignment problem？

Credit Assignment Problem（信用分配问题） 是机器学习，尤其是强化学习（RL）中的核心挑战之一，指的是如何将最终的奖励或惩罚准确地分配给导致该结果的各个中间动作或决策。在序列决策任务中，智能体执行一系列动作后获得一个最终奖励，但每个动作对最终结果的贡献程度往往…...

编程新知 2026/2/12 8:08:44

Java数组Arrays操作全攻略

Arrays类的概述 Java中的Arrays类位于java.util包中&#xff0c;提供了一系列静态方法用于操作数组&#xff08;如排序、搜索、填充、比较等&#xff09;。这些方法适用于基本类型数组和对象数组。 常用成员方法及代码示例 排序&#xff08;sort&#xff09; 对数组进行升序…...

编程新知 2026/1/22 13:36:20

Copilot for Xcode (iOS的 AI辅助编程)

Copilot for Xcode 简介Copilot下载与安装 体验环境要求下载最新的安装包安装登录系统权限设置 AI辅助编程生成注释代码补全简单需求代码生成辅助编程行间代码生成注释联想 代码生成 总结 简介 尝试使用了Copilot&#xff0c;它能根据上下文补全代码&#xff0c;快速生成常用…...

编程新知 2026/2/10 23:54:41

无需布线的革命：电力载波技术赋能楼宇自控系统-亚川科技

无需布线的革命&#xff1a;电力载波技术赋能楼宇自控系统 在楼宇自动化领域&#xff0c;传统控制系统依赖复杂的专用通信线路&#xff0c;不仅施工成本高昂&#xff0c;后期维护和扩展也极为不便。电力载波技术&#xff08;PLC&#xff09;的突破性应用&#xff0c;彻底改变了…...

编程新知 2026/1/11 9:09:02

新版NANO下载烧录过程

一、序言 搭建 Jetson 系列产品烧录系统的环境需要在电脑主机上安装 Ubuntu 系统。此处使用 18.04 LTS。 二、环境搭建 1、安装库 $ sudo apt-get install qemu-user-static$ sudo apt-get install python 搭建环境的过程需要这个应用库来将某些 NVIDIA 软件组件安装到 Je…...

编程新知 2026/1/22 21:54:45