handsome模板添加服务器状态按钮

博主： admin123
发布时间：2021 年 03 月 06 日
12870 次浏览
28 条评论
加载中
9520字数
分类：技术杂谈

# handsome模板添加服务器状态按钮

---

## 效果图

![image-20210306180036528](/usr/uploads/2021/03/3045001743.png)

## 操作步骤

废话不多说，直接上教程
</div>

### 1、修改headnav.php文件

将以下一段代码加在handsome/component/headnav.php文件末尾。

```php

<script src="/myApi/js/serverStatus.js">
		
</script>
```

注意此处src网址为第二步中我新增的js文件地址
</div>

### 2、添加js文件

这里我采用的新建js文件，便于主题更新后频繁大量文件内容

```javascript
var stateUrl = '/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>&nbsp;'
            }
            $("#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>&nbsp;'+aaa_tx+'</span>&nbsp;'+
            '<span class="badge badge-sm bg-dark"><i class="glyphicon glyphicon-download" aria-hidden="true"></i>&nbsp;'+aaa_rx+'</span>');
            $("#eth1").html('<span class="badge badge-sm bg-dark"><i class="glyphicon glyphicon-cloud-upload" aria-hidden="true"></i>&nbsp;'+ForDight(data.networkStats.networks.eth0.tx-se_tx,3)+'</span>&nbsp;'+
            '<span class="badge badge-sm bg-dark"><i class="glyphicon glyphicon-cloud-download" aria-hidden="true"></i>&nbsp;'+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>&nbsp;'+lo_tx+'</span>&nbsp;'+
            '<span class="badge badge-sm bg-dark"><i class="glyphicon glyphicon-cloud-download" aria-hidden="true"></i>&nbsp;'+lo_rx+'</span>');
            $("#io1").html('<span class="badge badge-sm bg-dark"><i class="glyphicon glyphicon-cloud-upload" aria-hidden="true"></i>&nbsp;'+ForDight(data.networkStats.networks.lo.tx-si_tx,3)+'</span>&nbsp;'+
            '<span class="badge badge-sm bg-dark"><i class="glyphicon glyphicon-cloud-download" aria-hidden="true"></i>&nbsp;'+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 : "/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();
});
```

注意修改上述代码中第一行网址为第三步中上传的服务器状态文件地址
</div>

### 3、上传显示服务器状态Api文件

在你的网站根目录新建myApi文件夹，将以下代码上传至刚才新建的文件夹  `代码太多，还是直接放文件吧`

<div class="hideContent">此处内容需要评论回复后（审核通过）方可阅读。</div>

最后修改：2024 年 06 月 18 日

如果觉得我的文章对你有用，请随意赞赏

28 条评论

kklxxywiii
October 30th, 2024 at 01:24 pm

你的文章让我学到了很多技能，非常实用。http://www.hengtong001.com

回复
欢乐无疆
September 3rd, 2023 at 05:12 pm

链接挂了呀~

回复
1. 白亮吖雅黑丫
  September 3rd, 2023 at 08:44 pm
  
  @欢乐无疆
  
  已更新
  
  回复
欢乐无疆
September 3rd, 2023 at 05:10 pm

好东西，来学习学习！！！感谢分享。ヾ(≧∇≦*)ゝ

回复
晚风
May 7th, 2023 at 03:19 pm

大佬，第三步myApi文件夹的文件下载链接打不开了，可以重新分享一下吗？୧(๑•̀⌄•́๑)૭

回复
1. 白亮吖雅黑丫
  May 7th, 2023 at 04:37 pm
  
  @晚风
  
  该评论仅登录用户及评论双方可见
  
  回复
  1. 晚风
    May 7th, 2023 at 04:46 pm
    
    @白亮吖雅黑丫
    
    非常感谢୧(๑•̀⌄•́๑)૭
    
    回复
晚风
May 7th, 2023 at 03:05 pm

学习学习

回复
lov3r
August 20th, 2022 at 04:19 am

谢谢大佬分享

回复
忘川
April 15th, 2022 at 07:20 pm

看看

回复
PaperFox
November 21st, 2021 at 10:17 am

赞一个牛

回复
lywly
November 15th, 2021 at 10:49 am

必须学习一下

回复
1. lywly
  November 15th, 2021 at 11:01 am
  
  @lywly
  
  啊这。。下载链接挂了
  
  回复
  1. 白亮吖雅黑丫
    November 15th, 2021 at 12:19 pm
    
    @lywly
    
    已修复！
    
    回复
    
    lywly
    November 15th, 2021 at 05:24 pm
    
    @白亮吖雅黑丫
    
    该评论仅登录用户及评论双方可见
    
    回复
    
    白亮吖雅黑丫
    November 15th, 2021 at 11:08 pm
    
    @lywly
    
    该评论仅登录用户及评论双方可见
    
    回复
    
    lywly
    November 16th, 2021 at 10:15 am
    
    @白亮吖雅黑丫
    
    完美∠( ᐛ 」∠)＿
    
    回复
    
    白亮吖雅黑丫
    November 15th, 2021 at 11:00 pm
    
    @lywly
    
    还需要在headnev.php文件中添加相关的前端显示内容哦。
    
    回复
    
    lywly
    November 15th, 2021 at 05:05 pm
    
    @白亮吖雅黑丫
    
    多谢
    
    回复
  2. 白亮吖雅黑丫
    November 15th, 2021 at 12:12 pm
    
    @lywly
    
    谢谢支持，请问是哪个下载连接挂了？
    
    回复
Luis
August 28th, 2021 at 03:42 pm

学习

回复
撒地方trg
August 14th, 2021 at 05:54 pm

学习

回复
Collacat
June 20th, 2021 at 04:18 pm

感谢分享

回复
singerw
June 9th, 2021 at 07:03 pm

感谢分享

回复
coly
June 7th, 2021 at 07:08 pm

感谢博主！

回复
testatest
May 30th, 2021 at 05:32 pm

网站证书过期了博主

回复
77Mys
March 25th, 2021 at 04:25 am

感谢分享

回复
XSY
March 21st, 2021 at 03:07 pm

证书过期啦

回复

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

评论 *

私密评论

名称 *

🎲

邮箱 *

地址

rmviutrdtf
你的文章内容非常卖力，让人点赞。 https://www...
gcdcnzyapx
你的文章让我感受到了不一样的风景，谢谢分享。 https...
lfiiizlxlk
你的文章内容非常卖力，让人点赞。 http://www....
bwypobamml
你的文章让我感受到了不一样的风景，谢谢分享。 http:...
nixxjqcbzz
你的才华让人惊叹，请继续保持。 http://www.5...

handsome模板添加服务器状态按钮

admin123 • 2021 年 03 月 06 日

# handsome模板添加服务器状态按钮

---

## 效果图

![image-20210306180036528](/usr/uploads/2021/03/3045001743.png)

## 操作步骤

废话不多说，直接上教程
</div>

### 1、修改headnav.php文件

将以下一段代码加在handsome/component/headnav.php文件末尾。

```php

<script src="/myApi/js/serverStatus.js">
		
</script>
```

注意此处src网址为第二步中我新增的js文件地址
</div>

### 2、添加js文件

这里我采用的新建js文件，便于主题更新后频繁大量文件内容

```javascript
var stateUrl = '/myApi/state.php';
var se_rx;
var se_tx;
var si_rx;
var si_tx;
/**
 * 显示服务器状态按钮相关脚本
 * @author 白亮吖雅黑丫
 * @time 2021/3/6
*/

if (isNaN(curNum) || isNaN(totalNum)) {
        return 'Error';
    }

注意修改上述代码中第一行网址为第三步中上传的服务器状态文件地址
</div>

### 3、上传显示服务器状态Api文件

在你的网站根目录新建myApi文件夹，将以下代码上传至刚才新建的文件夹  `代码太多，还是直接放文件吧`

<div class="hideContent">此处内容需要评论回复后（审核通过）方可阅读。</div>

handsome模板添加服务器状态按钮

28 条评论

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

handsome模板添加服务器状态按钮

# 基于宝塔面板的sspanel魔改V3一键搭建带脚本

V2Ray 基于 Nginx 的 vmess+ws+tls 一键安装脚本

基于Handsome主题美化

黑群晖折腾记（一）安装群辉系统

Nginx跨域解決

CentOS7使用firewall-cmd打开关闭防火墙与端口

畅购商城---第7章.商品搜索

mybatis SQL注入

树莓派3B+squid3搭建http代理服务器

handsome模板添加服务器状态按钮

28 条评论

发表评论 取消回复 使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

handsome模板添加服务器状态按钮

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款