[英]Wanting to get a Minecraft server status on my website
I am currently making a website which will show if a certain Minecraft server is online but I can't find any code on how to do this.我目前正在制作一个网站,该网站将显示某个 Minecraft 服务器是否在线,但我找不到任何有关如何执行此操作的代码。 I'd like some help with this as I am a beginner at both HTML and Javascript and can't figure it out, even when googling.
我需要一些帮助,因为我是 HTML 和 Javascript 的初学者,即使在谷歌搜索时也无法弄清楚。
Here:这里:
Took some code from some other people, but this works well.从其他人那里获取了一些代码,但这很好用。 Just change the server where I commented insert server here in the JS code and then change the name of server in the html if you want to change it to another server.
只需更改我在 JS 代码中插入服务器的服务器,然后如果要将其更改为另一台服务器,请更改 html 中的服务器名称。 If nobody is online or server is down it says server offline.
如果没有人在线或服务器已关闭,则表示服务器离线。
This example is for hypixel:此示例适用于 hypixel:
//based on a pen by @robinselmer var url = "https://api.minetools.eu/ping/hypixel.net"; //insert server here $.getJSON(url, function(r) { //data is the JSON string if(r.error){ $('#rest').html('Server Offline'); return false; } var pl = ''; if(r.players.sample.length > 0 ){ pl = '<br>OP: '+r.players.sample[0].name; } $('#rest').html(r.description.replace(/§(.+?)/gi, '')+'<br><b>Players Online:</b> '+r.players.online+pl); $('#favicon').attr('src', r.favicon); });
body,html{ background:url(https://i.imgur.com/iCZSjWa.png) center no-repeat; background-size:cover; min-height:100%; font-family: 'Roboto Mono', monospace; font-size:15px; display:flex; align-items:center; justify-content:center } body:before{ content:""; width:100%; height:100%; background:rgba(0,0,0,0.8); position:absolute; top:0; left:0; z-index:10 } h1,h2{ font-weight:400; letter-spacing:-2px }.card { position: relative; margin: 0 auto; padding: 0; width: 200px; min-width: 300px; background: #ffffff; border-radius: 5px; box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.3); -webkit-animation: fadein 2s; animation: fadein 2s; overflow:hidden; z-index: 999; }.header { position: relative; z-index:1; width: 100%; height: 180px; box-shadow:0 4px 3px #0002; overflow: hidden; }.card img{ width:100%; transition: all 1s ease; z-index:0 }.image { width: 100%; height: 180px; cursor:crosshair; overflow:hidden; }.image:hover img{ -webkit-transform: scale(1.2, 1.2); transform: scale(1.2, 1.2); }.header h2{ position:absolute; bottom:0; margin:0; width:100%; padding:0 10px; color:#fff; text-transform:uppercase; pointer-events:none; background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); }.icon { position: absolute; background:#fff; right: 10px; top: 135px; width: 80px; height: 80px; border-radius: 50%; overflow:hidden; border:3px solid #fff; box-shadow:0 4px 3px #0002; z-index:9 } #rest{ padding:30px 15px; line-height:30px; color:#000d42 }
<html> <div class="card"> <div class="icon"> <img src="https://pbs.twimg.com/profile_images/808180587605331969/u-CULTwl_400x400.jpg" id="favicon"></div><div class="header"> <div class="image"> <img src="http://hypixel.net/proxy.php?image=https%3A%2F%2Fi.imgur.com%2FjkFk4TU.png&hash=ec5b70a2ba4c4f79b5031ac356695a13" alt="" /> </div> <h2>hypixel.net</h2><.-- put server name here.--> </div> <div id="rest">Loading.:.</div> </div> <script src="https.//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> </html>
Try using this, it is new in development but might help!尝试使用它,它是新开发的,但可能会有所帮助!
https://github.com/Danirali/Minecraft-Server-Status/ https://github.com/Danirali/Minecraft-Server-Status/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.