中国著名十大vi设计案例,东莞网站包年优化,wordpress如何传照片,免费电子商务网站源码需求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…需求1根据后端传过来的设备名:DESKTOP-4DQRGQB以及mac:e0:be:03:74:40:0biQOO-8mac:b0:33:66:38:c3:25用web option 是动态增加的也就是那个选择框里面的东西是根据后端传过来的值动态增加的当select选择设备名字时下面一个框显示对应mac的地址
代码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title选择设备和显示MAC地址/title
/head
bodylabel fordeviceSelect设备选择/labelselect iddeviceSelect onchangeupdateMacAddress()!-- options will be added dynamically --/selectdiv idmacAddressDisplayMAC地址未选择设备/divscript// 后端传递的设备名和对应的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:0biQOO-8mac:b0:33:66:38:c3:25用web option是动态增加的当select选择设备名字时下面一个框显示对应mac的地址在mac地址下面有2个输入框分别是上行速率和下行速率需要我们手动输入然后可以提交post请求。
代码如下
html
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title选择设备和显示MAC地址、速率/title
/head
bodylabel fordeviceSelect设备选择/labelselect iddeviceSelect onchangeupdateDeviceInfo()!-- options will be added dynamically --/selectdivp idmacAddressDisplayMAC地址未选择设备/plabel foruploadRate上行速率/labelinput typetext iduploadRatelabel fordownloadRate下行速率/labelinput typetext iddownloadRate/divdivbutton onclicksubmitPostRequest()提交/button/divscript// 后端传递的设备名和对应的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:0biQOO-8mac:b0:33:66:38:c3:25用web option是动态增加的当select选择设备名字时下面一个框显示对应mac的地址在mac地址下面有2个输入框分别是上行速率和下行速率需要我们手动输入然后可以提交post请求点击取消按钮就会折叠起来不提交请求。
代码如下
html
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title选择设备和显示MAC地址、速率/titlestyle.hidden {display: none;}/style
/head
bodylabel fordeviceSelect设备选择/labelselect iddeviceSelect onchangeupdateDeviceInfo()!-- options will be added dynamically --/selectdivp idmacAddressDisplayMAC地址未选择设备/pdiv idrateInputs classhiddenlabel foruploadRate上行速率/labelinput typetext iduploadRatelabel fordownloadRate下行速率/labelinput typetext iddownloadRate/div/divdivbutton onclickexpandInputs()增加/buttonbutton onclickcollapseInputs()取消/buttonbutton onclicksubmitPostRequest()提交/button/divscript// 后端传递的设备名和对应的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:0biQOO-8mac:b0:33:66:38:c3:25用web option是动态增加的当select选择设备名字时下面一个框显示对应mac的地址在mac地址下面有2个输入框分别是上行速率和下行速率需要我们手动输入然后可以提交post请求点击取消按钮就会折叠起来不提交请求。
代码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title动态增加设备/titlestyle.hidden {display: none;}/style
/head
bodydiv iddevicesContainer/divscript// 后端传递的设备名和对应的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};}/scriptbutton onclickaddDevice()增加/buttonbutton onclickcollapseInputs()取消/buttonbutton onclicksubmitPostRequest()提交/buttonscript// 取消按钮的点击事件处理函数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:0biQOO-8mac:b0:33:66:38:c3:25用web option是动态增加的当select选择设备名字时下面一个框显示对应mac的地址在mac地址下面有2个输入框分别是上行速率和下行速率需要我们手动输入这个时候页面只有提交按钮和取消按钮然后点击提交按钮可以提交post请求点击取消按钮就会折叠起来不提交请求变回之前的只有一个增加按钮.。
代码如下
!DOCTYPE html
html
headtitle动态设置设备信息/title
/head
bodytd设备选择/tdtd colspan2select stylewidth: 220px size1 iddeviceSelect namedeviceSelect onChangeshowDeviceInfo();!-- 设备选项由后端动态生成 --option valueDESKTOP-4DQRGQBDESKTOP-4DQRGQB/optionoption valueiQOO-8iQOO-8/option/selectbrdiv iddeviceInfo styledisplay: none;p idmacAddress/plabel foruploadRate上行速率/labelinput typetext iduploadRate nameuploadRatebrlabel fordownloadRate下行速率/labelinput typetext iddownloadRate namedownloadRatebrbutton onclicksubmitForm()提交/buttonbutton onclickcancelForm()取消/button/div/tdscriptfunction 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:0biQOO-8mac:b0:33:66:38:c3:25用web option是动态增加的当select选择设备名字时下面一个框显示对应mac的地址在mac地址下面有2个输入框分别是上行限速和下行限速需要我们手动输入这个时候页面只有提交按钮和取消按钮然后点击提交按钮可以提交post请求点击取消按钮就会变为初始状态只有一个增加按钮。
代码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title动态添加设备信息/titlestyle.hidden {display: none;}/style
/head
bodydiv iddevicesbutton onclickaddDevice()增加/button/divdiv iddeviceInfo classhiddenp idmacAddress/plabel foruploadLimit上行限速/labelinput typetext iduploadLimit nameuploadLimitbrlabel fordownloadLimit下行限速/labelinput typetext iddownloadLimit namedownloadLimitbrbutton onclicksubmitForm()提交/buttonbutton onclickcancelForm()取消/button/divscriptfunction 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:0biQOO-8mac:b0:33:66:38:c3:25用web option是动态增加的当select选择设备名字时下面一个框显示对应mac的地址在mac地址下面有2个输入框分别是上行限速和下行限速需要我们手动输入这个时候页面只有提交按钮和取消按钮然后点击提交按钮可以提交post请求点击取消按钮就会变为初始状态清空之前的输入。
代码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title动态添加设备信息/titlestyle.hidden {display: none;}/style
/head
bodydiv iddevicesbutton onclickaddDevice()增加/button/divdiv iddeviceInfo classhiddenp idmacAddress/plabel foruploadLimit上行限速/labelinput typetext iduploadLimit nameuploadLimitbrlabel fordownloadLimit下行限速/labelinput typetext iddownloadLimit namedownloadLimitbrbutton onclicksubmitForm()提交/buttonbutton onclickcancelForm()取消/button/divscriptfunction 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:0biQOO-8mac:b0:33:66:38:c3:25用web option是动态增加的当select选择设备名字时下面一个框显示对应mac的地址在mac地址下面有2个输入框分别是上行限速和下行限速需要我们手动输入这个时候页面只有提交按钮和取消按钮然后点击提交按钮可以提交post请求点击取消按钮就会变为初始状态清空之前的输入。注选择设备名字时旁边弄设备选择这几个字。
代码如下
!DOCTYPE html
html
headtitle设备信息提交/titlestyle.hidden {display: none;}/style
/head
bodybutton idaddButton onclickaddDevice()增加/buttondiv iddeviceInfo classhiddenlabel fordeviceSelect设备选择/labelselect iddeviceSelect onchangeshowDeviceInfo()!-- 动态生成设备选项 --/selectbrlabel formacAddressMAC地址/labelinput typetext idmacAddress readonlybrlabel foruploadSpeed上行限速/labelinput typetext iduploadSpeedbrlabel fordownloadSpeed下行限速/labelinput typetext iddownloadSpeedbrbutton onclicksubmitDeviceInfo()提交/buttonbutton onclickcancel()取消/button
/divscriptvar 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:0biQOO-8mac:b0:33:66:38:c3:25用web option是动态增加的当select选择设备名字时注选择设备名字时旁边弄设备选择这几个字下面一个框显示对应mac的地址在mac地址下面有2个输入框分别是上行限速和下行限速需要我们手动输入这个时候页面只有提交按钮和取消按钮没有增加按钮然后点击提交按钮可以提交post请求点击取消按钮就会变为初始状态清空之前的输入。
代码如下
!DOCTYPE html
html
headtitle设备信息提交/titlestyle.hidden {display: none;}#deviceInfo {margin-top: 10px;}/style
/head
bodydiv iddeviceInfo classhiddenlabel fordeviceSelect设备选择/labelselect iddeviceSelect onchangeshowDeviceInfo()!-- 动态生成设备选项 --/selectbrlabel formacAddressMAC地址/labelinput typetext idmacAddress readonlybrlabel foruploadSpeed上行限速/labelinput typetext iduploadSpeedbrlabel fordownloadSpeed下行限速/labelinput typetext iddownloadSpeedbrbutton onclicksubmitDeviceInfo()提交/buttonbutton onclickcancel()取消/button
/divbutton idaddButton onclickaddDevice()增加/buttonscriptvar 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
运行效果 提前请求 点击需求再次增加满足要求。
