web需求记录

不悔哥2023-11-23 8:06

需求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中的options
        for (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中的options
        for (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中的options
        for (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);

            // 初始化设备选择框的options
            for (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>

运行效果：

提前请求：

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

相关推荐
余生H12 分钟前
前端的全栈混合之路Meteor篇：关于前后端分离及与各框架的对比
前端·javascript·node.js·全栈
程序员-珍15 分钟前
使用openapi生成前端请求文件报错 ‘Token “Integer“ does not exist.‘
java·前端·spring boot·后端·restful·个人开发
axihaihai19 分钟前
网站开发的发展(后端路由/前后端分离/前端路由)
前端
流烟默31 分钟前
Vue中watch监听属性的一些应用总结
前端·javascript·vue.js·watch
2401_8572979141 分钟前
招联金融2025校招内推
java·前端·算法·金融·求职招聘
茶卡盐佑星_1 小时前
meta标签作用/SEO优化
前端·javascript·html
Ink1 小时前
从底层看 path.resolve 实现
前端·node.js
金灰1 小时前
HTML5--裸体回顾
java·开发语言·前端·javascript·html·html5
茶卡盐佑星_1 小时前
说说你对es6中promise的理解？
前端·ecmascript·es6
Promise5201 小时前
总结汇总小工具
前端·javascript
热门推荐
01组基轨迹建模 GBTM的介绍与实现（Stata 或 R）02【经验分享】Ubuntu22.04安装微信(linux官方版)032024年高教社杯数学建模国赛C题超详细解题思路分析04分享几个惊艳的 Three.js 个人站点05安卓系列机型永久去除data分区加密 详细步骤解析06【2024数模国赛赛题思路公开】国赛B题思路丨附可运行代码丨无偿自提07springer 在线投稿编译踩坑08Ubuntu24.04安装中文输入法09【2024高教社杯全国大学生数学建模竞赛】B题 生产过程中的决策问题——解题思路 代码 论文10CTF网络安全大赛简单的web抓包题目：HEADache