用于刷新此脚本的代码

时间:2016-02-20 07:25:28

标签: javascript jquery html css minecraft

我对javascript或其他任何东西都不是很好。我可以添加什么来使这个Minecraft服务器查询每10秒更新一次?目前它有点慢,所以需要一段时间来识别正在离开或加入的玩家。另外,我如何让这个脚本显示每个服务器上当前正在游戏中的玩家名称列表?

CODE:



<link type="text/css" rel="stylesheet" media="screen" href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css"></link>

<style type="text/css">



/*Bootstrap styles*/

@-webkit-keyframes progress-bar-stripes {
from {
background-position: 40px 0;
}
to {
background-position: 0 0;
}
}
@keyframes progress-bar-stripes {
from {
background-position: 40px 0;
}
to {
background-position: 0 0;
}
}
.progress {
overflow: hidden;
height: 20px;
margin-bottom: 20px;
background-color: #333;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}
.progress-bar {
float: left;
width: 0%;
height: 100%;
font-size: 12px;
line-height: 20px;
color: #ffffff;
text-align: center;
background-color: #428bca;
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
-webkit-transition: width 0.6s ease;
transition: width 0.6s ease;
}
.progress-striped .progress-bar {
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-size: 40px 40px;
}
.progress.active .progress-bar {
-webkit-animation: progress-bar-stripes 2s linear infinite;
animation: progress-bar-stripes 2s linear infinite;
}
.progress-bar-success {
background-color: #5cb85c;
}
.progress-striped .progress-bar-success {
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}
.progress-bar-info {
background-color: #5bc0de;
}
.progress-striped .progress-bar-info {
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}
.progress-bar-warning {
background-color: #f0ad4e;
}
.progress-striped .progress-bar-warning {
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}
.progress-bar-danger {
background-color: #d9534f;
}
.progress-striped .progress-bar-danger {
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}

.label {
  display: inline;
  padding: .2em .6em .3em;
  font-size: 75%;
  font-weight: bold;
  line-height: 1;
  color: #ffffff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: .25em;
}
.label[href]:hover,
.label[href]:focus {
  color: #ffffff;
  text-decoration: none;
  cursor: pointer;
}
.label:empty {
  display: none;
}
.btn .label {
  position: relative;
  top: -1px;
}

.label-default {
background-color: #999999;
}
.label-default[href]:hover,
.label-default[href]:focus {
background-color: #808080;
}
.label-primary {
background-color: #428bca;
}
.label-primary[href]:hover,
.label-primary[href]:focus {
background-color: #3071a9;
}
.label-success {
background-color: #5cb85c;
}
.label-success[href]:hover,
.label-success[href]:focus {
background-color: #449d44;
}
.label-info {
background-color: #5bc0de;
}
.label-info[href]:hover,
.label-info[href]:focus {
background-color: #31b0d5;
}
.label-warning {
background-color: #f0ad4e;
}
.label-warning[href]:hover,
.label-warning[href]:focus {
background-color: #ec971f;
}
.label-danger {
background-color: #d9534f;
}
.label-danger[href]:hover,
.label-danger[href]:focus {
background-color: #c9302c;
}

/*End Bootstrap styles*/




/*Our labels for the online/offline stats*/

.serverdata .label{
float:right;

}

/*The container for all of the data*/

.servercontainer{
width:250px;
background-color:#555;
overflow:hidden;
color:white;

}

/*Main title*/

.servercontainer h1{
margin-bottom:15px;
color:white !important;
background-color:black;
width:100%;
padding:10px;
font-size:16px;
}

/*Padding for all of our server data, so they don't touch sides of container*/

.serverdata{
padding:6px;

}

/*Style for our loading text*/

.loading{
font-size:14px;
color:white;
padding:20px;
}

/*Each Server Title*/

.serverdata h2{
margin-bottom:10px;
color:white;
font-size:16px !important;
}

/*The text that displays player counts in progress bar*/

.progress h4{
    position:absolute
        
}

/*Hide running total, used for keeping player total without reset*/

.runningtotal{
display:none;
}

/*visible player total*/

.total-players{
padding:5px;
color:white;
background-color:#222;
}


.servercontainer i{
color:white;
}

</style>

<script>
$( document ).ready(function() {
/*jslint browser: true, devel: true */
/*globals MinecraftAPI: true */
 
(function (servers) {
    'use strict';
 
    var head = document.getElementsByTagName('head')[0],
        script = document.createElement('script'),
        currentServer = 0,
        totalPlayers = [],
        allDone,
        buildServerStatusContainer,
        loadServerStatus,
        stringifyServer,
        buildStatusObject,
        buildOfflineStatusObject,
        buildErrorStatusObject;
 
    allDone = function (items, fn, done) {
        var completed = 0,
            len = items.length,
            i,
            callback;
 
        if (len === 0) {
            return done();
        }
 
        callback = function () {
            completed += 1;
 
            if (completed === len) {
                done();
            }
        };
 
        for (i = 0; i < len; i += 1) {
            fn(items[i], callback);
        }
    };
 
    stringifyServer = function (server) {
        return server.name;
    };
 
    buildServerStatusContainer = function (server, index) {
        var serverData,
            loading,
            loadingtext,
            playerhead;
 
        serverData = document.createElement('div');
        serverData.classList.add('serverdata', 'server-' + currentServer);
 
        loading = document.createElement('i');
        loading.classList.add('fa', 'fa-spinner', 'fa-spin');
        loading.classList.add('loading-server', 'server-loading-' + currentServer);
 
        playerhead = document.createElement('div');
        playerhead.classList.add('playerhead', 'server-playerhead-' + currentServer);
 
        loadingtext = document.createElement('span');
        loadingtext.innerHTML = ' Loading...';

        serverData.appendChild(loading);
        serverData.appendChild(loadingtext);
        serverData.appendChild(playerhead);
 
        document.querySelector('.servercontainer').appendChild(serverData);
 
        servers[index].id = currentServer;
        currentServer += 1;
    };
 
    buildErrorStatusObject = function (server, status) {
        var container,
            ip,
            online;
 
        container = document.createElement('div');
 
        ip = document.createElement('h2');
        ip.innerHTML = stringifyServer(server);
 
        online = document.createElement('span');
        online.classList.add('label', 'label-danger');
        online.innerHTML = 'Error!';
        online.style.display = 'block';
 
        container.appendChild(ip);
        ip.appendChild(online);
 
        document.querySelector('.servercontainer .server-' + server.id).innerHTML = '';
        document.querySelector('.servercontainer .server-' + server.id).appendChild(container);
    };
 
    buildOfflineStatusObject = function (server, status) {
        var container,
            ip,
            online;
 
        container = document.createElement('div');
 
        ip = document.createElement('h2');
        ip.innerHTML = stringifyServer(server);
 
        online = document.createElement('span');
        online.classList.add('label', 'label-warning');
        online.innerHTML = 'Offline';
        online.style.display = 'block';
 
        container.appendChild(ip);
        ip.appendChild(online);
 
        document.querySelector('.servercontainer .server-' + server.id).innerHTML = '';
        document.querySelector('.servercontainer .server-' + server.id).appendChild(container);
    };
 
    buildStatusObject = function (server, status, lobby) {
        var item = document.querySelector('.servercontainer .server-' + server.id),
            progresswidth,
            container,
            ip,
            online,
            progress,
            progressbar,
            players;
 
        progresswidth = Math.floor((status.players.now / (lobby === undefined ? status.players.max : lobby)) * 100) + '%';
 
        container = document.createElement('div');
 
        ip = document.createElement('h2');
        ip.innerHTML = stringifyServer(server);
 
        online = document.createElement('span');
        online.classList.add('label', 'label-success');
        online.innerHTML = 'Online';
        online.style.display = 'block';
        online.style.marginBottom = '5px';
 
        progress = document.createElement('div');
        progress.classList.add('progress','progress-striped','active');
 
        progressbar = document.createElement('div');
        progressbar.classList.add('progress-bar', 'progress-bar-success');
        progressbar.style.width = progresswidth;
 
        progress.appendChild(progressbar);
 
        players = document.createElement('h4');
        players.innerHTML = status.players.now + ' / ' + (lobby === undefined ? status.players.max : lobby) + ' Players Online';
 
        container.appendChild(ip);
        ip.appendChild(online);
        container.appendChild(progress);
        progress.appendChild(players);
 
        item.innerHTML = '';
        item.appendChild(container);
 
        totalPlayers.push(status.players.now);
    };
 
    loadServerStatus = function (server, done) {
        MinecraftAPI.getServerStatus(server.ip, {
            port: server.port
        }, function (err, status) {
            if (err) {
                buildErrorStatusObject(server, status);
                done();
                return;
            }
 
            if (!status.online) {
                buildOfflineStatusObject(server, status);
                done();
                return;
            }
 
            if (status.players.max === 1) {
                buildStatusObject(server, status, server.lobby);
                done();
                return;
            }
 
            buildStatusObject(server, status);
 
            done();
        });
    };
 
    script.addEventListener('load', function () {
        servers.forEach(buildServerStatusContainer);
 
        var totalplayers = document.createElement('h2');
        totalplayers.classList.add('total-players');
 
        document.querySelector('.servercontainer').appendChild(totalplayers);
 
        setInterval(function () {
            totalPlayers = [];
            allDone(servers, loadServerStatus, function () {
                document.querySelector('.total-players').innerHTML = totalPlayers.reduce(function (a, b) { return a + b; }) + ' Total Players';
            });
        }, 1000);
 
        allDone(servers, loadServerStatus, function () {
            document.querySelector('.total-players').innerHTML = totalPlayers.reduce(function (a, b) { return a + b; }) + ' Total Players';
        });
    });
 
    script.type = 'text/javascript';
    script.src = '//mcapi.us/scripts/minecraft.min.js';
 
    head.appendChild(script);
}([{
    ip: '46.105.88.222',
    port: 25565,
    name: 'Promeion'
},{
    ip: '46.105.88.222',
    port: 25570,
    name: 'Hub',
    lobby: 252
}]));
});
</script>

<div class="servercontainer">
<h1>Promeion Network</h1>

</div>
&#13;
&#13;
&#13;

提前致谢!

3 个答案:

答案 0 :(得分:0)

让它每10秒运行一次,将脚本放入一个函数中,并为其命名。然后你可以使用setTimeout()并等待一段时间。将setTimeout放在函数的末尾,然后从内部再次调用该函数。

如何显示播放器更具体到您在那里的脚本。也许你有一些文件来源于它?

干杯

答案 1 :(得分:0)

在下面的代码中,1000表示检查玩家数量的1秒间隔。尝试修改它,看看它是否有任何改变。

setInterval(function () {
        totalPlayers = [];
        allDone(servers, loadServerStatus, function () {
            document.querySelector('.total-players').innerHTML = totalPlayers.reduce(function (a, b) { return a + b; }) + ' Total Players';
        });
    }, 1000);

答案 2 :(得分:0)

如果您同时管理两个Web服务器使用websocket,这将使服务器能够将更新的结果推送回客户端。

如果服务器无法控制,

一个。拉结果并仅附加结果(数据)而不是整个html部分。

湾仅附加已修改的信息而非整个信息

℃。如果要加载的数据很大,请使用分页或块;

d。如果要在每次更改时创建新对象,请确保启动或销毁对象和侦听器。

感谢。