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中的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>

运行效果：

提前请求：

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/179082.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

[VS]控制台程序运行后无法聚焦到命令行窗口

[VS]控制台程序运行后无法聚焦到命令行窗口

0 环境 Windows11 22H2VS 2022 CommunityWindows Terminal 1.18.2822.0 1 问题说明 当使用 VS 写控制台程序时&#xff0c;运行后会弹出 CMD 窗口&#xff0c;并聚焦到该窗口。除了当前程序运行外&#xff0c;最后应该是暂停&#xff0c;等待用户输入任意按键&#xff0c;然…
阅读更多...
竞赛 ： 题目：基于深度学习的水果识别 设计 开题 技术

竞赛 ： 题目：基于深度学习的水果识别 设计 开题 技术

1 前言 Hi&#xff0c;大家好&#xff0c;这里是丹成学长&#xff0c;今天做一个 基于深度学习的水果识别demo 这是一个较为新颖的竞赛课题方向&#xff0c;学长非常推荐&#xff01; &#x1f9ff; 更多资料, 项目分享&#xff1a; https://gitee.com/dancheng-senior/pos…
阅读更多...
论文笔记：Localizing Cell Towers fromCrowdsourced Measurements

论文笔记：Localizing Cell Towers fromCrowdsourced Measurements

2015 1 Intro 1.1 motivation opensignal.com 、cellmapper.net 和 opencellid.org 都是提供天线&#xff08;antenna&#xff09;位置的网站 他们提供的天线位置相当准确&#xff0c;但至少在大多数情况下不完全正确这个目标难以实现的原因是蜂窝网络供应商没有义务提供有…
阅读更多...
3-合并区间

3-合并区间

1题目描述 2思路 在合并区间之前&#xff0c;需要对所有的区间按照区间第一个元素进行排序&#xff0c;这样可以保证已经合并的各个区间之后不会再包含其他区间&#xff0c;或者被其他区间包含&#xff1b; 首先自己进行一下排序练习&#xff0c;回顾冒泡排序和选择排序&#…
阅读更多...
Leetcode——121 买卖股票的最佳时机

Leetcode——121 买卖股票的最佳时机

(超时。。。。。。&#xff09;除了暴力法我是真的。。。。。。 class Solution {public int maxProfit(int[] prices) {int len prices.length;int max0;for(int i0;i<len-1;i){for(int ji1;j<len;j){int income prices[j] - prices[i];if(income>max){maxincome;…
阅读更多...
真实网络中的 bbr

真实网络中的 bbr

本文包含中心极限定理&#xff0c;大数定律&#xff0c;经济规律等&#xff0c;bbr 倒没多少&#xff0c;不过已经习惯把 bbr 当靶子了。 上周写了 揭秘 bbr 以及 抢带宽的原理&#xff0c;我对自己说&#xff0c;这都是理论上如何&#xff0c;可实际上呢。于是有必要结合更实际…
阅读更多...
基于VM虚拟机下Ubuntu18.04系统，Hadoop的安装与详细配置

基于VM虚拟机下Ubuntu18.04系统，Hadoop的安装与详细配置

参考博客&#xff1a; https://blog.csdn.net/duchenlong/article/details/114597944 与上面这个博客几乎差不多&#xff0c;就是java环境配置以及后面的hadoop的hdfs-site.xml文件有一些不同的地方。 准备工作 1.更新 # 更新 sudo apt update sudo apt upgrade2.关闭防火…
阅读更多...
数据结构-栈的实现

数据结构-栈的实现

1.栈的概念及结构 栈&#xff1a;一种特殊的线性表&#xff0c;其只允许在固定的一端进行插入和删除元素操作。进行数据插入和删除操作的一端称为栈顶&#xff0c;另一端称为栈底。栈中的数据元素遵守后进先出LIFO&#xff08;Last In First Out&#xff09;的原则。 压栈&…
阅读更多...
git-2

git-2

1.分离头指针情况下的注意事项 分离头指针指的是变更没有基于某个branch去做&#xff0c;所以当进行分支切换的时候&#xff0c;在分离头指针上产生的commit&#xff0c;很可能会被git当作垃圾清理掉&#xff0c;如果你认为是重要的内容&#xff0c;切记需要绑定分支 2.进一步…
阅读更多...
NFC：应用场景广泛的短距离通信技术

NFC：应用场景广泛的短距离通信技术

NFC&#xff1a;应用场景广泛的短距离通信技术 一、NFC 技术介绍1.1 NFC 技术应用场景1.2 NFC 技术优点1.3 NFC 工作原理 二、NFC 开发2.1 NFC 应用开发流程2.2 NFC 读取和写入2.3 NFC 读写功能示例 三、总结 一、NFC 技术介绍 NFC &#xff08;Near-field communication&…
阅读更多...
hadoop在本地创建文件，然后将文件拷贝/上传到HDFS

hadoop在本地创建文件，然后将文件拷贝/上传到HDFS

1.要$cd {对应目录}进入到对应目录&#xff0c;一般为 cd /usr/local/hadoop/ 2.创建文件&#xff0c;$sudo gedit {文件名}&#xff0c;例 sudo gedit test.txt 然后在弹出的txt文件输入内容&#xff0c;点击右上角的保存之后&#xff0c;关闭即可。 3.拷贝本地文件到HDF…
阅读更多...
机器学习第12天：聚类

机器学习第12天：聚类

文章目录 机器学习专栏 无监督学习介绍 聚类 K-Means 使用方法 实例演示 代码解析 绘制决策边界 本章总结 机器学习专栏 机器学习_Nowl的博客-CSDN博客 无监督学习介绍 某位著名计算机科学家有句话&#xff1a;“如果智能是蛋糕&#xff0c;无监督学习将是蛋糕本体&a…
阅读更多...
sql语法大全

sql语法大全

1&#xff0c;创建数据库 create database 数据库名字; 2,查看所有的数据库名称 show databases; MySQL服务器已有4个数据库&#xff0c;这些数据库都是MySQL安装时自动创建的。 information_schema 和 performance_schema 数据库分别是 MySQL 服务器的数据字典&#xff08;…
阅读更多...
everything排除目录

everything排除目录

everything默认搜索所有文件&#xff0c;自己把没啥必要的目录都屏蔽掉&#xff0c;记录如下
阅读更多...
分享一篇很就以前的文档-VMware Vsphere菜鸟篇

分享一篇很就以前的文档-VMware Vsphere菜鸟篇

PS&#xff1a;由于内容是很久以前做的记录&#xff0c;在整理过程中发现了一些问题&#xff0c;简单修改后分享给大家。首先ESXI节点和win7均运行在VMware Workstation上面&#xff0c;属于是最底层&#xff0c;而新创建的CentOS则是嵌套后创建的操作系统&#xff0c;这点希望…
阅读更多...
基于金枪鱼群算法优化概率神经网络PNN的分类预测 - 附代码

基于金枪鱼群算法优化概率神经网络PNN的分类预测 - 附代码

基于金枪鱼群算法优化概率神经网络PNN的分类预测 - 附代码 文章目录 基于金枪鱼群算法优化概率神经网络PNN的分类预测 - 附代码1.PNN网络概述2.变压器故障诊街系统相关背景2.1 模型建立 3.基于金枪鱼群优化的PNN网络5.测试结果6.参考文献7.Matlab代码 摘要&#xff1a;针对PNN神…
阅读更多...
transformer之KV Cache

transformer之KV Cache

一、为什么要研究KV Cache 非常有效的加速推理速度&#xff0c;效果如下所示&#xff1a; import numpy as np import time import torch from transformers import AutoModelForCausalLM, AutoTokenizer NAME_OR_PATH r*************** device "cuda" if torch.cu…
阅读更多...
SpringBoot——启动类的原理

SpringBoot——启动类的原理

优质博文&#xff1a;IT-BLOG-CN SpringBoot启动类上使用SpringBootApplication注解&#xff0c;该注解是一个组合注解&#xff0c;包含多个其它注解。和类定义SpringApplication.run要揭开SpringBoot的神秘面纱&#xff0c;我们要从这两位开始就可以了。 SpringBootApplicati…
阅读更多...
用友NC Cloud uploadChunk任意文件上传漏洞复现 [附POC]

用友NC Cloud uploadChunk任意文件上传漏洞复现 [附POC]

文章目录 用友NC Cloud uploadChunk任意文件上传漏洞复现 [附POC]0x01 前言0x02 漏洞描述0x03 影响版本0x04 漏洞环境0x05 漏洞复现1.访问漏洞环境2.构造POC3.复现 0x06 修复建议 用友NC Cloud uploadChunk任意文件上传漏洞复现 [附POC] 0x01 前言 免责声明&#xff1a;请勿利…
阅读更多...
AT89S52单片机的最小应用系统

AT89S52单片机的最小应用系统

目录 ​一.时钟电路设计 1.内部时钟方式 2.外部时钟方式 3.时钟信号的输出 二.机器周期&#xff0c;指令周期与指令时序 1.时钟周期 2.机器周期 3.指令周期 三.复位操作和复位电路 1.复位操作 2 复位电路设计 四.低功耗节电模式 AT89S52本身片内有8KB闪烁存储器&am…
阅读更多...
最新文章

Copyright @ 2022~2023