网页终端展示：5个终端状态动态变化
<!DOCTYPE html>
<html>
<head>
<title>网页终端展示：5个终端状态动态变化</title>
<style>
.terminal{
width: 100px;
height: 100px;
border: 1px solid black;
display: inline-block;
margin: 20px;
position: relative;
}
.terminal p{
position: absolute;
bottom: -20px;
width: 100%;
text-align: center;
font-size: 12px;
font-weight: bold;
}
.terminal.active{
background-color: green;
}
</style>
</head>
<body>
<div class='terminal'>
<p>终端1</p>
</div>
<div class='terminal'>
<p>终端2</p>
</div>
<div class='terminal'>
<p>终端3</p>
</div>
<div class='terminal'>
<p>终端4</p>
</div>
<div class='terminal'>
<p>终端5</p>
</div>
<pre><code><script>
let terminals = document.querySelectorAll('.terminal');
const updateTerminalStatus = (index) => {
terminals[index].classList.add('active');
setTimeout(() => {
terminals[index].classList.remove('active');
}, 2000);
};
//模拟串口收到消息
const receiveMessage = (message) => {
switch (message) {
case '1':
updateTerminalStatus(0);
break;
case '2':
updateTerminalStatus(1);
break;
case '3':
updateTerminalStatus(2);
break;
case '4':
updateTerminalStatus(3);
break;
case '5':
updateTerminalStatus(4);
break;
default:
break;
}
};
//监听串口消息
setInterval(() => {
let message = '1'; //假设收到了'1'的消息
receiveMessage(message);
}, 5000);
</script>
</code></pre>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/ovJ8 著作权归作者所有。请勿转载和采集!