<html> <head> <script type=“text/javascript” src=“jquery-3.6.0.js”></script> <script type=“text/javascript”>
jQuery.noConflict();
jQuery(document).ready(function($) {
htmlobj=$.ajax({url:"https://asia.api.riotgames.com/lor/ranked/v1/leaderboards?api_key=RGAPI-254d3556-b545-4986-a278-d4e284102c85",async:false});
leaderboard = htmlobj.responseText;
leaderboard2 = leaderboard.substring(12,leaderboard.length-1);
leaderboard_json = JSON.parse(leaderboard2);
var s = "";
for(var i = 0; i < leaderboard_json.length; i++) {
s = "<tr><td>" + (leaderboard_json[i].rank+1) + "</td><td>" + leaderboard_json[i].lp + "</td><td>" +
leaderboard_json[i].name + "</td></tr>";
$("#tab").append(s);
}
});
</script> <style type=“text/css”> html, body {
margin: 0; padding: 0;
} body {
background: #fff; font: 14px/1.5 "微软雅黑";
} a {
text-decoration: none;
} table {
width: 90%; border: 1px solid #c3dcf5; margin: 10px auto; border-collapse: collapse;/*合并单边框*/
} thead th {
background: #ebf5ff; text-align: center; color: #5591be;
} td {
color: #263d63; border: 1px solid #c3dcf5; padding: 4px 14px; text-align: center;
} /*方法一*/ /*tr.odd td {
background-color: #f7fbff;
}**增加背景色，使得应用该规则的行表现出隔行换色的效果*/ /*方法二*/ tr:nth-of-type(even) { background-color: #ebf5ff; }/*设置偶数行背景色*/ tr:nth-of-type(odd) { background-color: #f7fbff; }/*设置奇数行背景色*/ </style> </head> <body> <table border=“1px” id=“tab”> <tr> <td scope=“col”><strong>排名</strong></td> <td scope=“col”><strong>胜点</strong></td> <td scope=“col”><strong>玩家名称</strong></td> </tr> </table> </body> </html>