handsome模板添加服务器状态按钮
效果图
操作步骤
废话不多说，直接上教程
1、修改headnav.php文件
将以下一段代码加在handsome/component/headnav.php文件末尾。
<!--服务器状态js-->
<script src="https://www.520315.xyz/myApi/js/serverStatus.js">
</script>
注意此处src网址为第二步中我新增的js文件地址
2、添加js文件
这里我采用的新建js文件，便于主题更新后频繁大量文件内容
var stateUrl = 'https://www.520315.xyz/myApi/state.php';
var se_rx;
var se_tx;
var si_rx;
var si_tx;
/**
* 显示服务器状态按钮相关脚本
* @author 白亮吖雅黑丫
* @time 2021/3/6
*/
function returnFloat(value){
return value.toFixed(2)+'%';
}
function floats(value){
return value.toFixed(2);
}
function getPercent(curNum, totalNum, isHasPercentStr) {
curNum = parseFloat(curNum);
totalNum = parseFloat(totalNum);
if (isNaN(curNum) || isNaN(totalNum)) {
return 'Error';
}
return isHasPercentStr ?
totalNum <= 0 ? '0%' : (Math.round(curNum / totalNum * 10000) / 100.00 + '%') :
totalNum <= 0 ? 0 : (Math.round(curNum / totalNum * 10000) / 100.00 + '%');
}
function getPercents(curNum, totalNum, isHasPercentStr) {
curNum = parseFloat(curNum);
totalNum = parseFloat(totalNum);
if (isNaN(curNum) || isNaN(totalNum)) {
return 'Error';
}
return isHasPercentStr ?
totalNum <= 0 ? '0%' : (Math.round(curNum / totalNum * 10000) / 100.00) :
totalNum <= 0 ? 0 : (Math.round(curNum / totalNum * 10000) / 100.00);
}
function setSize(value,d){
switch (d) {
case 'bit':
return bit = value*8;
break;
case 'bytes':
return value;
break;
case 'kb':
return value/1024;
break;
case 'mb':
return value/1024/1024;
break;
case 'gb':
return value/1024/1024/1024;
break;
case 'tb':
return value/1024/1024/1024/1024;
break;
}
}
function ForDight(Dight){
if (Dight < 0){
var Last = 0+"B/s";
}else if (Dight < 1024){
var Last = setSize(Dight,'bytes').toFixed(0)+"B/s";
}else if (Dight < 1048576){
var Last = floats(setSize(Dight,'kb'))+"K/s";
}else{
var Last = floats(setSize(Dight,'mb'))+"MB/s";
}
return Last;
}
function state(){
$.ajax({
url: stateUrl,
type: 'get',
dataType: 'json',
data: {
action:'fetch',
},
beforeSend:function(){
},
complete:function(){
},
error: function() {
},
success: function (data) {
var cpu = data.serverStatus.cpuUsage['user']+data.serverStatus.cpuUsage['nice']+data.serverStatus.cpuUsage['sys'];
$("#cpu").html(returnFloat(cpu));
$("#cpu_css").css("width",returnFloat(cpu));
if(cpu<70){
$("#cpu_css").removeClass();
$("#cpu_css").addClass("progress-bar bg-success");
$("#cpu").removeClass();
$("#cpu").addClass("pull-right text-success");
}
if(cpu>=70){
$("#cpu_css").removeClass();
$("#cpu_css").addClass("progress-bar bg-warning");
$("#cpu").removeClass();
$("#cpu").addClass("pull-right text-warning");
}
if(cpu>=90){
$("#cpu_css").removeClass();
$("#cpu_css").addClass("progress-bar bg-danger");
$("#cpu").removeClass();
$("#cpu").addClass("pull-right text-danger");
}
var memory_value = data.serverStatus.memRealUsage['value'];
var memory_max = data.serverStatus.memRealUsage['max'];
$("#memory").html(getPercent(memory_value,memory_max,memory_value));
window.RemData = getPercents(memory_value,memory_max,memory_value);
$("#memory_css").css("width",getPercent(memory_value,memory_max,memory_value));
var me = getPercents(memory_value,memory_max,memory_value);
if(me<70){
$("#memory_css").removeClass();
$("#memory_css").addClass("progress-bar bg-success");
$("#memory").removeClass();
$("#memory").addClass("pull-right text-success");
}
if(me>=70){
$("#memory_css").removeClass();
$("#memory_css").addClass("progress-bar bg-warning");
$("#memory").removeClass();
$("#memory").addClass("pull-right text-warning");
}
if(me>=90){
$("#memory_css").removeClass();
$("#memory_css").addClass("progress-bar bg-danger");
$("#memory").removeClass();
$("#memory").addClass("pull-right text-danger");
}
if(floats(setSize(memory_value,'mb'))>1024){
var memory_data_value = floats(setSize(memory_value,'gb'))+"GB";
} else{
var memory_data_value = floats(setSize(memory_value,'mb'))+"MB";
}
if(floats(setSize(memory_max,'mb'))>1024){
var memory_data_max = floats(setSize(memory_max,'gb'))+"GB";
} else{
var memory_data_max = floats(setSize(memory_max,'mb'))+"MB";
}
$("#memory_data").html(memory_data_value+" / "+memory_data_max);
var disk_value = data.serverInfo.diskUsage['value'];
var disk_max = data.serverInfo.diskUsage['max'];
$("#disk").html(getPercent(disk_value,disk_max,disk_value));
$("#disk_css").css("width",getPercent(disk_value,disk_max,disk_value));
var dk = getPercents(disk_value,disk_max,disk_value);
if(dk<70){
$("#disk_css").removeClass();
$("#disk_css").addClass("progress-bar bg-success");
$("#disk").removeClass();
$("#disk").addClass("pull-right text-success");
}
if(dk>=70){
$("#disk_css").removeClass();
$("#disk_css").addClass("progress-bar bg-warning");
$("#disk").removeClass();
$("#disk").addClass("pull-right text-warning");
}
if(dk>=90){
$("#disk_css").removeClass();
$("#disk_css").addClass("progress-bar bg-danger");
$("#disk").removeClass();
$("#disk").addClass("pull-right text-danger");
}
if(floats(setSize(disk_value,'mb'))>1024){
var disk_data_value = floats(setSize(disk_value,'gb'))+"GB";
} else{
var disk_data_value = floats(setSize(disk_value,'mb'))+"MB";
}
if(floats(setSize(disk_max,'mb'))>1024){
var disk_data_max = floats(setSize(disk_max,'gb'))+"GB";
} else{
var disk_data_max = floats(setSize(disk_max,'mb'))+"MB";
}
$("#disk_data").html(disk_data_value+" / "+disk_data_max);
var memCached_value = data.serverStatus.memCached['value'];
var memCached_max = data.serverStatus.memCached['max'];
$("#memCached").html(getPercent(memCached_value,memCached_max,memCached_value));
$("#memCached_css").css("width",getPercent(memCached_value,memCached_max,memCached_value));
var mem = getPercents(memCached_value,memCached_max,memCached_value);
if(mem<70){
$("#memCached_css").removeClass();
$("#memCached_css").addClass("progress-bar bg-success");
$("#memCached").removeClass();
$("#memCached").addClass("pull-right text-success");
}
if(mem>=70){
$("#memCached_css").removeClass();
$("#memCached_css").addClass("progress-bar bg-warning");
$("#memCached").removeClass();
$("#memCached").addClass("pull-right text-warning");
}
if(mem>=90){
$("#memCached_css").removeClass();
$("#memCached_css").addClass("progress-bar bg-danger");
$("#memCached").removeClass();
$("#memCached").addClass("pull-right text-danger");
}
if(floats(setSize(memCached_value,'mb'))>1024){
var memCached_data_value = floats(setSize(memCached_value,'gb'))+"GB";
} else{
var memCached_data_value = floats(setSize(memCached_value,'mb'))+"MB";
}
if(floats(setSize(memCached_max,'mb'))>1024){
var memCached_data_max = floats(setSize(memCached_max,'gb'))+"GB";
} else{
var memCached_data_max = floats(setSize(memCached_max,'mb'))+"MB";
}
$("#memCached_data").html(memCached_data_value+" / "+memCached_data_max);
var memBuffers_value = data.serverStatus.memBuffers['value'];
var memBuffers_max = data.serverStatus.memBuffers['max'];
$("#memBuffers").html(getPercent(memBuffers_value,memBuffers_max,memBuffers_value));
$("#memBuffers_css").css("width",getPercent(memBuffers_value,memBuffers_max,memBuffers_value));
var memB = getPercents(memCached_value,memCached_max,memCached_value);
if(memB<70){
$("#memBuffers_css").removeClass();
$("#memBuffers_css").addClass("progress-bar bg-success");
$("#memBuffers").removeClass();
$("#memBuffers").addClass("pull-right text-success");
}
if(memB>=70){
$("#memBuffers_css").removeClass();
$("#memBuffers_css").addClass("progress-bar bg-warning");
$("#memBuffers").removeClass();
$("#memBuffers").addClass("pull-right text-warning");
}
if(memB>=90){
$("#memBuffers_css").removeClass();
$("#memBuffers_css").addClass("progress-bar bg-danger");
$("#memBuffers").removeClass();
$("#memBuffers").addClass("pull-right text-danger");
}
if(floats(setSize(memBuffers_value,'mb'))>1024){
var memBuffers_data_value = floats(setSize(memBuffers_value,'gb'))+"GB";
} else{
var memBuffers_data_value = floats(setSize(memBuffers_value,'mb'))+"MB";
}
if(floats(setSize(memBuffers_max,'mb'))>1024){
var memBuffers_data_max = floats(setSize(memBuffers_max,'gb'))+"GB";
} else{
var memBuffers_data_max = floats(setSize(memBuffers_max,'mb'))+"MB";
}
$("#memBuffers_data").html(memBuffers_data_value+" / "+memBuffers_data_max);
var state = "";
for(var i = 0; i < data.serverStatus.sysLoad.length ; i++){
state += '<span class="badge badge-sm bg-dark">'+data.serverStatus.sysLoad[i]+'</span> '
}
$("#state").html(state);
var state_s = getPercent(data.serverStatus.sysLoad[0],2,data.serverStatus.sysLoad[0]);
$("#state_css").css("width",state_s);
$("#state_s").html(state_s);
var sta = getPercents(data.serverStatus.sysLoad[0],2,data.serverStatus.sysLoad[0]);
if(sta<70){
$("#state_css").removeClass();
$("#state_css").addClass("progress-bar bg-success");
$("#state_s").removeClass();
$("#state_s").addClass("pull-right text-success");
}
if(sta>=70){
$("#state_css").removeClass();
$("#state_css").addClass("progress-bar bg-warning");
$("#state_s").removeClass();
$("#state_s").addClass("pull-right text-warning");
}
if(sta>=90){
$("#state_css").removeClass();
$("#state_css").addClass("progress-bar bg-danger");
$("#state_s").removeClass();
$("#state_s").addClass("pull-right text-danger");
}
$("#time").html('<span class="badge badge-sm bg-dark">'+data.serverInfo.serverTime+'</span>');
$("#u_time").html('<span class="badge badge-sm bg-dark">'+data.serverInfo.serverUptime["days"]+' 天'+data.serverInfo.serverUptime["hours"]+' 时 '+data.serverInfo.serverUptime["mins"]+' 分'+data.serverInfo.serverUptime["secs"]+' 秒</span>');
if(floats(setSize(data.networkStats.networks.eth0.tx,'mb'))>1024){
var aaa_tx = floats(setSize(data.networkStats.networks.eth0.tx,'gb'))+"GB";
} else{
var aaa_tx = floats(setSize(data.networkStats.networks.eth0.tx,'mb'))+"MB";
}
if(floats(setSize(data.networkStats.networks.eth0.rx,'mb'))>1024){
var aaa_rx = floats(setSize(data.networkStats.networks.eth0.rx,'gb'))+"GB";
} else{
var aaa_rx = floats(setSize(data.networkStats.networks.eth0.rx,'mb'))+"MB";
}
$("#eth").html('<span class="badge badge-sm bg-dark"><i class="glyphicon glyphicon-upload" aria-hidden="true"></i> '+aaa_tx+'</span> '+
'<span class="badge badge-sm bg-dark"><i class="glyphicon glyphicon-download" aria-hidden="true"></i> '+aaa_rx+'</span>');
$("#eth1").html('<span class="badge badge-sm bg-dark"><i class="glyphicon glyphicon-cloud-upload" aria-hidden="true"></i> '+ForDight(data.networkStats.networks.eth0.tx-se_tx,3)+'</span> '+
'<span class="badge badge-sm bg-dark"><i class="glyphicon glyphicon-cloud-download" aria-hidden="true"></i> '+ForDight(data.networkStats.networks.eth0.rx-se_rx,3)+'</span>');
se_tx = data.networkStats.networks.eth0.tx;
se_rx = data.networkStats.networks.eth0.rx;
if(floats(setSize(data.networkStats.networks.lo.tx,'mb'))>1024){
var lo_tx = floats(setSize(data.networkStats.networks.lo.tx,'gb'))+"GB";
} else{
var lo_tx = floats(setSize(data.networkStats.networks.lo.tx,'mb'))+"MB";
}
if(floats(setSize(data.networkStats.networks.lo.rx,'mb'))>1024){
var lo_rx = floats(setSize(data.networkStats.networks.lo.rx,'gb'))+"GB";
} else{
var lo_rx = floats(setSize(data.networkStats.networks.lo.rx,'mb'))+"MB";
}
$("#io").html('<span class="badge badge-sm bg-dark"><i class="fa fa-upload" aria-hidden="true"></i> '+lo_tx+'</span> '+
'<span class="badge badge-sm bg-dark"><i class="glyphicon glyphicon-cloud-download" aria-hidden="true"></i> '+lo_rx+'</span>');
$("#io1").html('<span class="badge badge-sm bg-dark"><i class="glyphicon glyphicon-cloud-upload" aria-hidden="true"></i> '+ForDight(data.networkStats.networks.lo.tx-si_tx,3)+'</span> '+
'<span class="badge badge-sm bg-dark"><i class="glyphicon glyphicon-cloud-download" aria-hidden="true"></i> '+ForDight(data.networkStats.networks.lo.rx-si_rx,3)+'</span>');
si_tx = data.networkStats.networks.lo.tx;
si_rx = data.networkStats.networks.lo.rx;
}
});
}
function getNowFormatDate(){
var date = new Date();
var seperator1 = "-";
var seperator2 = ":";
var month = date.getMonth() + 1;
var strDate = date.getDate();
if (month >= 1 && month <= 9) {
month = "0" + month;
}
if (strDate >= 0 && strDate <= 9) {
strDate = "0" + strDate;
}
var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
+ " " + date.getHours() + seperator2 + date.getMinutes()
+ seperator2 + date.getSeconds();
return currentdate;
}
function UserInfo(){
$.ajax({
type : "get",
url : "https://www.520315.xyz/ServerStatus/IPInfo",
async : true,
beforeSend : function(){
},
complete : function(){
},
error : function(){
UserInfo();
},
success : function(data){
if(data!=null){
if(data.data['isp']==null){
UserInfo();
}else{
$("#ip").html('<span class="badge badge-sm bg-dark">'+data.data['ip']+'</span>');
$("#address").html('<span class="badge badge-sm bg-dark">'+data.data['isp']+'</span>');
$("#b").html('<span class="badge badge-sm bg-dark">'+data.data['browse']+'</span>');
$("#sys").html('<span class="badge badge-sm bg-dark">'+data.data['os']+'</span>');
}
}
},
});
};
$('#StateData').click(function(){
clearInterval(window.getnet);
clearInterval(window.info);
window.getnet = setInterval(function(){
if($('#StateDataPos').is('.open')){
state();
$("#sys_times").html('<span class="badge badge-sm bg-dark">'+getNowFormatDate()+'</span>');
}
},1000);
UserInfo();
});
注意修改上述代码中第一行网址为第三步中上传的服务器状态文件地址
3、上传显示服务器状态Api文件
在你的网站根目录新建myApi文件夹，将以下代码上传至刚才新建的文件夹 代码太多，还是直接放文件吧
此处内容需要评论回复后（审核通过）方可阅读。
27 条评论
链接挂了呀~
已更新
好东西，来学习学习！！！感谢分享。ヾ(≧∇≦*)ゝ
大佬，第三步myApi文件夹的文件下载链接打不开了，可以重新分享一下吗？୧(๑•̀⌄•́๑)૭
非常感谢୧(๑•̀⌄•́๑)૭
学习学习
谢谢大佬分享
看看
赞一个牛
必须学习一下
啊这。。下载链接挂了
已修复！
完美∠( ᐛ 」∠)＿
还需要在headnev.php文件中添加相关的前端显示内容哦。
多谢
谢谢支持，请问是哪个下载连接挂了？
学习
学习
感谢分享
感谢分享
感谢博主！
网站证书过期了 博主
感谢分享
证书过期啦