web需求記錄

需求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>

運行效果：