网页终端状态展示 - 实时监控终端连接状态 - 常规

<!DOCTYPE html>
<html>
<head>
	<title>网页终端状态展示 - 实时监控终端连接状态</title>
	<style>
		.terminal {
			width: 100px;
			height: 100px;
			background-color: #f2f2f2;
			border: 1px solid #ccc;
			display: inline-block;
			margin-right: 20px;
			text-align: center;
			position: relative;
		}
		.terminal p {
			margin: 0;
			padding: 10px;
			position: absolute;
			bottom: -30px;
			left: 0;
			right: 0;
			font-size: 14px;
			color: #666;
		}
		.terminal.on {
			background-color: green;
		}
		.terminal.off {
			background-color: red;
		}
	</style>
</head>
<body>
	<h1>网页终端状态展示</h1>
	<div class='terminal' id='t1'>
		<p>终端1</p>
	</div>
	<div class='terminal' id='t2'>
		<p>终端2</p>
	</div>
	<div class='terminal' id='t3'>
		<p>终端3</p>
	</div>
	<div class='terminal' id='t4'>
		<p>终端4</p>
	</div>
	<div class='terminal' id='t5'>
		<p>终端5</p>
	</div>
	<script>
		const t1 = document.getElementById('t1');
		const t2 = document.getElementById('t2');
		const t3 = document.getElementById('t3');
		const t4 = document.getElementById('t4');
		const t5 = document.getElementById('t5');
<pre><code>	function changeTerminalStatus(terminal, status) {
		if (status === 'on') {
			terminal.classList.add('on');
			terminal.classList.remove('off');
		} else if (status === 'off') {
			terminal.classList.add('off');
			terminal.classList.remove('on');
		}
	}

	// 模拟接收到数据并改变终端状态
	setTimeout(() =&gt; {
		changeTerminalStatus(t1, 'on');
	}, 2000);
	setTimeout(() =&gt; {
		changeTerminalStatus(t2, 'on');
	}, 3000);
	setTimeout(() =&gt; {
		changeTerminalStatus(t3, 'off');
	}, 4000);
	setTimeout(() =&gt; {
		changeTerminalStatus(t4, 'on');
	}, 5000);
	setTimeout(() =&gt; {
		changeTerminalStatus(t5, 'off');
	}, 6000);
&lt;/script&gt;
</code></pre>
</body>
</html>