<!DOCTYPE html><html><head> ?<meta charset="utf-8"> ?<title>Our superheroes</title> ?<link href="https://fonts.googleapis.com/css?family=Faster+One" rel="stylesheet"> ?<link rel="stylesheet" href="./style.css"> ?<title>JSON</title></head><body> ?<header> ???<div> ???</div> ?</header> ?<section> ?</section> ?<script src="./script/main.js"></script></body></html>
header h1{ ?width: 100%; ?text-align: center; ?font-size: 50px; ?font-family: 楷体;}section{ ?width: 100%; ?display: inline-flex;}section p{ ?margin:0; ?font-size: 30px; ?font-family: 楷体; ?color: rgb(0, 0, 0); ?width: 100%;}div{ ?width: 33%;}section p2{ ?margin:0; ?font-size: 30px; ?font-family: 楷体; ?color: rgb(3, 3, 3); ?width: 33%;}section p3{ ?margin:0; ?font-size: 25px; ?font-family: 楷体; ?color: rgb(0, 0, 0); ?width: 33%;}var header = document.querySelector(‘header‘);var section = document.querySelector(‘section‘);var requestURL = ‘https://wcphaha.github.io/for-football/Sports.json‘;var request = new XMLHttpRequest();request.open(‘GET‘, requestURL);request.responseType = ‘json‘;request.send();request.onload = function () { ???var inter = request.response; ???console.log(inter) ???showname(inter); ???showteam(inter);}function showname(jsonObj) { ???var h = document.createElement(‘h1‘); ???h.textContent = jsonObj[‘team‘]; ???header.appendChild(h)}function showteam(jsonObj) { ???var p1 = new Array(4); ???var part1 = document.querySelector(‘div‘); ???for (var i = 0; i < 4; i++) ???????p1[i] = document.createElement(‘p‘); ???p1[0].textContent = "哈斯:" + jsonObj[‘address‘]; ???p1[1].textContent = "时间卡:" + jsonObj[‘field‘]; ???p1[2].textContent = "萨满打开里面:" + jsonObj[‘chairman‘]; ???p1[3].textContent = "澳门克莱德曼:" + jsonObj[‘coach‘]; ???for (i = 0;i<4; i++) ???????part1.appendChild(p1[i]); ???section.appendChild(part1); ???var honor = jsonObj[‘honor‘]; ???var p2=document.createElement(‘p2‘); ???for (var i = 0; i < 6; i++) { ???????var list = document.createElement(‘li‘); ???????list.textContent=honor[i]; ???????p2.appendChild(list); ???} ???section.appendChild(p2); ???var member = jsonObj[‘member‘]; ???var p3 = document.createElement(‘p3‘); ???for(var i=0;i<16;i++){ ???????var list = document.createElement(‘li‘); ???????list.textContent=member[i].name+‘(‘+member[i].number+‘)‘+‘--‘+member[i].position+‘--‘+member[i].nationality; ???????p3.appendChild(list); ???} ???section.appendChild(p3);}json
原文地址：https://www.cnblogs.com/NineKit/p/10006821.html