getVpsInfo.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script>
        window.onload = function () { loadXMLDoc(); }
        function tsToTime(time = +new Date()) { // from:https://segmentfault.com/a/1190000015992232
            var date = new Date(time + 8 * 3600 * 1000);
            return date.toJSON().substr(0, 19).replace('T', ' ');
        }


        function loadXMLDoc() {
            var xmlhttp;
            if (window.XMLHttpRequest) {
                //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
                xmlhttp = new XMLHttpRequest();
            }
            else {
                // IE6, IE5 浏览器执行代码
                // xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                alert("求求你换个正常的浏览器吧");
            }
            xmlhttp.onreadystatechange = function () {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    jsonObj = JSON.parse(xmlhttp.responseText);
                    // document.getElementById("myTipText").innerHTML=xmlhttp.responseText;
                    var num = jsonObj.length;
                    document.getElementById("myTipText").innerHTML = "当前共有" + num + "个节点"

                    var table = document.getElementById("table");
                    for (var i = 0; i < num; i++) {
                        var row = table.insertRow(table.rows.length);
                        var c1 = row.insertCell(0);
                        c1.innerHTML = jsonObj[i].title;
                        var c2 = row.insertCell(1);
                        c2.innerHTML = jsonObj[i].ip;
                        var c3 = row.insertCell(2);
                        c3.innerHTML = jsonObj[i].ssCount;
                        var c4 = row.insertCell(3);
                        c4.innerHTML = jsonObj[i].ssIpMsg;
                        var c5 = row.insertCell(4);
                        c5.innerHTML = tsToTime(jsonObj[i].updateTs);
                        var c6 = row.insertCell(5);
                        c6.innerHTML = jsonObj[i].isAlive;
                        var c7 = row.insertCell(6);
                        c7.innerHTML = jsonObj[i].password;
                    }

                }
            }
            xmlhttp.open("GET", "getVpsInfo.json", true);
            xmlhttp.send();
        }
    </script>
</head>


<body>

    <div class="wrapper">
        <a id="myTipText"></a>

        <!-- Trigger -->
        <button id="sslinks" class="btn" data-clipboard-text="No links Copied.">
            Copy to clipboard
        </button>
        
    </div>

    <table id="table" border="1" cellspacing="0" cellpadding="0">
        <tr>
            <th>title</th>
            <th>ip</th>
            <th>ssCount</th>
            <th>ssIpMsg</th>
            <th>updateTs</th>
            <th>isAlive</th>
            <th>password</th>
        </tr>
    </table>
    
    <script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
    <script>
    var clipboard = new ClipboardJS('.btn');
    clipboard.on('success', function(e) {
        console.log(e);
        alert("Copy success");
    });
    clipboard.on('error', function(e) {
        console.log(e);
        alert("Copy error");
    });
    </script>

</body>


</html>