写一个html的监控页面,并给出实际页面
时间: 2023-12-17 07:05:04 浏览: 25
以下是一个简单的HTML监控页面示例,该页面可以显示服务器的CPU、内存、磁盘等基本信息:
```html
<!DOCTYPE html>
<html>
<head>
<title>Server Monitor</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
</head>
<body>
<h1>Server Monitor</h1>
<table>
<tr>
<th>Item</th>
<th>Value</th>
</tr>
<tr>
<td>CPU Usage</td>
<td id="cpu-usage"></td>
</tr>
<tr>
<td>Memory Usage</td>
<td id="memory-usage"></td>
</tr>
<tr>
<td>Disk Usage</td>
<td id="disk-usage"></td>
</tr>
</table>
<script>
// 获取 CPU 使用率
function getCPUUsage() {
// TODO: 实现获取 CPU 使用率的代码
return '50%';
}
// 获取内存使用率
function getMemoryUsage() {
// TODO: 实现获取内存使用率的代码
return '60%';
}
// 获取磁盘使用率
function getDiskUsage() {
// TODO: 实现获取磁盘使用率的代码
return '70%';
}
// 更新监控数据
function updateMonitor() {
document.getElementById('cpu-usage').textContent = getCPUUsage();
document.getElementById('memory-usage').textContent = getMemoryUsage();
document.getElementById('disk-usage').textContent = getDiskUsage();
}
// 定时更新监控数据
setInterval(updateMonitor, 1000);
</script>
</body>
</html>
```
该页面中使用了一个表格来显示服务器的监控数据,其中CPU、内存、磁盘使用率的值通过JavaScript代码获取并更新到表格中。由于没有实际服务器,所以这些获取数据的函数只是简单的返回了一个固定的值,需要根据实际情况进行实现。