家里蹲的狐狸给CPU加个进度条
html部分
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<title>Go语言与ajax示例</title>
<!-- Bootstrap core CSS -->
<link href="assets/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container themed-container">
<header class="d-flex justify-content-center py-3">
<p class="h2">系统信息</p>
</header>
<p class="mt-4 " >Cpu: <div class="progress mb-3">
<div class="progress-bar bg-success" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" id="cpu">0%</div>
</div></p>
<p class="mt-4" id="disk">Disk: </p>
<p class="mt-4" id="mem">Memory: </p>
<p class="mt-4" id="net">网络: </p>
<p class="mt-4" id="speed"></p>
</article>
</div>
<script src="assets/dist/js/bootstrap.bundle.min.js"></script>
<script src="assets/dist/js/jquery-3.6.0.min.js"></script>
<script src="assets/dist/js/loli.js"></script>
</body>
</html>js部分
$(function (){
setInterval(myajax, 2000);
function myajax(){
$.get('/ajax',function(data,status){
if (status == 'success') {
cpuclass = data.Cpuused+"%"
$('#cpu').css("width",cpuclass)
$('#cpu').text(data.Cpuused+"%")
$('#disk').text("Disk: "+data.Diskused+"% used "+data.Diskfree+"G/"+ data.Disktotal+"G")
$('#mem').text("Memory: "+data.Memused+"% used "+data.Memavailable+"G/"+ data.Memtotal+"G")
$('#net').text("总下载: "+data.Netsend+"G | 总上传: "+data.Netrecv+"G")
$('#speed').text("下载: "+data.Netdown+" | 上传: "+data.Netup)
}
});
};
});
