写个网页要求展示5个终端终端边上有文字框电脑串口收到对应的文字时终端状态变化
<!DOCTYPE html>
<html>
<head>
<title>终端展示页面</title>
<style type="text/css">
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
height: 100vh;
}
<pre><code> .terminal {
position: relative;
width: 200px;
height: 200px;
margin: 20px;
background-color: #fff;
border: 1px solid #000;
border-radius: 5px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 24px;
}
.terminal .status {
position: absolute;
top: -20px;
right: -20px;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #fff;
border: 2px solid #000;
display: flex;
justify-content: center;
align-items: center;
font-size: 18px;
}
.terminal .message {
margin-top: 20px;
padding: 10px;
border: 1px solid #000;
border-radius: 5px;
text-align: center;
display: none;
}
.terminal.active .status {
background-color: green;
color: #fff;
border-color: green;
}
.terminal.inactive .status {
background-color: red;
color: #fff;
border-color: red;
}
.terminal.active .message {
display: block;
}
</style>
</code></pre>
</head>
<body>
<div class="container">
<div class="terminal" data-id="1">
<div class="status"></div>
<div class="message">终端1状态：活跃</div>
</div>
<div class="terminal" data-id="2">
<div class="status"></div>
<div class="message">终端2状态：活跃</div>
</div>
<div class="terminal" data-id="3">
<div class="status"></div>
<div class="message">终端3状态：活跃</div>
</div>
<div class="terminal" data-id="4">
<div class="status"></div>
<div class="message">终端4状态：活跃</div>
</div>
<div class="terminal" data-id="5">
<div class="status"></div>
<div class="message">终端5状态：活跃</div>
</div>
</div>
<pre><code><script type="text/javascript">
const terminals = document.querySelectorAll('.terminal');
function updateTerminalStatus(id, isActive) {
for (let i = 0; i < terminals.length; i++) {
const terminal = terminals[i];
if (terminal.dataset.id == id) {
terminal.classList.remove('active', 'inactive');
terminal.classList.add(isActive ? 'active' : 'inactive');
terminal.querySelector('.message').innerText = `终端${id}状态：${isActive ? '活跃' : '非活跃'}`;
break;
}
}
}
// 模拟串口收到消息
setInterval(() => {
const id = Math.ceil(Math.random() * 5);
const isActive = Math.random() >= 0.5;
updateTerminalStatus(id, isActive);
}, 3000);
</script>
</code></pre>
</body>
</html
原文地址: https://www.cveoy.top/t/topic/gs8F 著作权归作者所有。请勿转载和采集!