1、生成页面效果
2、HTML程序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>linux_system</title>
<!-- 引入CSS样式文件 -->
<link rel="stylesheet" href="/css/sytle.css">
<script src="js/jquery.min.js"></script>
</head>
<body>
<p>内存利用率</p>
<div class="progress">
<span class="memory_util" style="width: 60%;"><span>60%</span></span>
</div>
<p>CPU利用率</p>
<div class="progress">
<span class="System_load" style="width: 60%;"><span>60%</span></span>
</div>
<p>磁盘使用情况<span class="totalava"></span></p>
<div class="progress">
<span class="Disk_occupancy" style="width: 70%;"><span>60%</span></span>
</div>
<script>
(function () {
//获取对象
var memory_util = document.querySelector('.memory_util');
var memory_util_text = document.querySelector('.memory_util').querySelector('span');
var System_load = document.querySelector('.System_load');
var System_load_text = document.querySelector('.System_load').querySelector('span');
var Disk_occupancy = document.querySelector('.Disk_occupancy');
var Disk_occupancy_text = document.querySelector('.Disk_occupancy').querySelector('span');
var totalava = document.querySelector('.totalava');
//内存利用率
var memory = setInterval(function () {
//1、创建异步对象
var xmlhttp = new XMLHttpRequest();
//2、设置请求方式和请求地址
xmlhttp.open("GET", "Memory_utilization.php", true);
//3、发送请求
xmlhttp.send();
//4、监听状态的变化
xmlhttp.onreadystatechange = function (ev2) {
//5、返回处理结果
if (xmlhttp.readyState == 4) {
if (xmlhttp.status >= 200 && xmlhttp.status < 300 || xmlhttp.status === 304) {
//把接收到的字符串转化为浮点数并保存两位小数
memory_util.style.width = (parseFloat(xmlhttp.responseText).toFixed(1)) + '%';
memory_util_text.innerHTML = memory_util.style.width;
}
else {
console.log('没有接到服务器数据');
}
}
}
}, 2000)
//CPU利用率
var cpu = setInterval(function () {
//1、创建异步对象
var xmlhttp = new XMLHttpRequest();
//2、设置请求方式和请求地址
xmlhttp.open("GET", "System_load.php", true);
//3、发送请求
xmlhttp.send();
//4、监听状态的变化
xmlhttp.onreadystatechange = function (ev2) {
//5、返回处理结果
if (xmlhttp.readyState == 4) {
if (xmlhttp.status >= 200 && xmlhttp.status < 300 || xmlhttp.status === 304) {
//把接收到的字符串转化为浮点数并保存两位小数
System_load.style.width = (parseFloat(xmlhttp.responseText).toFixed(1)) + '%';
System_load_text.innerHTML = System_load.style.width;
}
else {
console.log('没有接到服务器数据');
}
}
}
}, 2000)
//磁盘使用情况
var Disk = setInterval(function () {
//1、创建异步对象
var xmlhttp = new XMLHttpRequest();
//2、设置请求方式和请求地址
xmlhttp.open("GET", "Disk_occupancy.php", true);
//3、发送请求
xmlhttp.send();
//4、监听状态的变化
xmlhttp.onreadystatechange = function (ev2) {
//5、返回处理结果
if (xmlhttp.readyState == 4) {
if (xmlhttp.status >= 200 && xmlhttp.status < 300 || xmlhttp.status === 304) {
var arr = xmlhttp.responseText;
console.log(typeof (arr));
console.log(arr);
var str3 = JSON.parse(arr);
Disk_occupancy.style.width = str3[3] + '%';
Disk_occupancy_text.innerHTML = Disk_occupancy.style.width;
// var arrInt = arr.map(Number);
totalava.innerHTML = ' 剩余:(' + str3[2] + 'M' + ')';
// console.log(arrInt[0]);
// console.log(arrInt[1]);
// console.log(arrInt[2]);
} else {
console.log('没有接到服务器数据');
}
}
}
}, 2000)
})()
</script>
</body>
</html>
3、css程序 放到文件夹ccs下 名字为style.css
/* 设置外部灰色底层边框 */
.progress {
height:20px;
width: 250px;
margin-left: 20px;
margin-top: 5px;
background:#ebebeb;
border-radius:10px;
}
/* 设置进度条立体效果 */
.progress > span {
position:relative;
float:left;
margin:0 -1px;
height:18px;
line-height:16px;
text-align:right;
background:#85c440;
border:1px solid #78b337 #6ba031 #568128;
border-radius:10px;
background-image:linear-gradient(to bottom,#b7dc8e 0%,#99ce5f 70%,#85c440 100%);
box-shadow:inset 0 1px rgba(255,255,255,0.3),0 1px 2px rgba(0,0,0,0.2);
}
.progress > span > span {
padding:0 8px;
font-size:11px;
font-weight:bold;
color:rgba(0,0,0,0.7);
}
.totalava {
margin-left: 10px;
background-color: green;
}
4、js文件 下载 jquery.min.js 文件
5.php文件
(1)、获取内存利用率 Memory_utilization.php
<?php
//内存利用率
///proc/meminfo 内存占用情况
/* MemTotal: 252148 kB 总内存
* MemFree: 52300 kB空闲内存
*/
$str = shell_exec('more /proc/meminfo');
//匹配字符串
$pattern = "/(.+):\s*([0-9]+)/";
preg_match_all($pattern, $str, $out);
echo (100 * ($out[2][0] - $out[2][1]) / $out[2][0]);
(2)、获取CPU利用率 System_load.php
<?php
// more proc/stat 该文件记录了自系统启动以来的所有内核的相关数据
//shell_exec() 通过 shell 环境执行命令,并且将完整的输出以字符串的方式返回。
$str = shell_exec('more /proc/stat');
$pattern = "/(cpu[0-9]?)[\s]+([0-9]+)[\s]+([0-9]+)[\s]+([0-9]+)[\s]+([0-9]+)[\s]+([0-9]+)[\s]+([0-9]+)[\s]+([0-9]+)/";
//preg_match_all 帅选出匹配项
preg_match_all($pattern, $str, $out);
for ($n = 1; $n < count($out[1]); $n++) {
echo (($out[2][$n] + $out[3][$n]) / ($out[2][$n] + $out[3][$n] + $out[4][$n] + $out[5][$n] + $out[6][$n] + $out[7][$n]) * 100);
}
(3)、获得磁盘使用情况 Disk_occupancy.php
<?php
$str = shell_exec('df -h');
$pattern = "/[\s]+([0-9]+)/";
preg_match_all($pattern, $str, $out);
$arr1 = [];
foreach ($out[1] as $key => $value) {
$arr1[$key] = intval($value);
}
print_r(json_encode($arr1));