一、网页部分代码
效果图：
代码实现：
<!DOCTYPE html>
<html lang="zh"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>工业温湿度采集</title><style>
body {
background-color: #f0f0f0;
background: url('aa.jpg') no-repeat center center fixed;
font-family: 'Arial', sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}.container {
background-color: #e0d5d4;
border-radius: 10px;
padding: 20px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
text-align: center;
}h1 {
color: #4a3d3d;
}input[type="text"],
input[type="button"] {
width: 80%;
padding: 10px;
margin: 10px 0;
border: none;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}input[type="button"] {
background-color: #8c7a7a;
color: white;
cursor: pointer;
transition: background-color 0.3s;
}input[type="button"]:hover {
background-color: #c4a6a6;
}.radio-group {
display: flex;
justify-content: space-around;
margin: 10px 0;
}label {
margin-right: 10px;
}
</style>
</head><body>
<div class="container">
<h1>工业采集控制机制</h1>
<input type="text" id="temperature" placeholder="温度 (°C)" readonly>
<input type="text" id="humidity" placeholder="湿度 (%)" readonly>
<input type="button" value="获取温湿度" οnclick="fetchData()"><div class="radio-group">
<fieldset>
<legend>LED灯控制</legend>
<label><input type="radio" name="led" value="on" οnclick="sendControlCommand(name,value)"> 开</label>
<label><input type="radio" name="led" value="off" οnclick="sendControlCommand(name,value)"> 关</label>
</fieldset>
</div><div class="radio-group">
<fieldset>
<legend>蜂鸣器控制</legend>
<label><input type="radio" name="buzzer" value="on" οnclick="sendControlCommand(name,value)"> 开</label>
<label><input type="radio" name="buzzer" value="off" οnclick="sendControlCommand(name,value)"> 关</label>
</fieldset>
</div>
</div>
<script>
function fetchData() {
// 假设从服务器获取温度和湿度
var xhr = new XMLHttpRequest(); // 创建XMLHttpRequest对象var url = ""; // 请求的URL，这个可以不写
xhr.open("POST", url, true); // 配置请求：POST方法、URL、异步请求
xhr.send("get");
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) { // 请求完成且成功
var x = xhr.responseText.split("/");
document.getElementById('temperature').value = x[0];
document.getElementById('humidity').value = x[1];
}
}
}
function sendControlCommand(name,value) {
var xhr = new XMLHttpRequest(); // 创建XMLHttpRequest对象var url = ""; // 请求的URL，这个可以不写
xhr.open("POST", url, true); // 配置请求：POST方法、URL、异步请求
if (name == "led") {
if (value == "on") {
xhr.send("set 0 1");
}
else if (value == "off") {
xhr.send("set 0 0");
}
}
else if(name == "buzzer")
{
if(value == "on")
{
xhr.send("set 1 1");
}
else if(value == "off")
{
xhr.send("set 1 0");
}
}
}
</script>
</body>
</html>
