<!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{
100%;
text-align: center;
font-size: 50px;
font-family: 楷体;
}
section{
100%;
display: inline-flex;
}
section p{
margin:0;
font-size: 30px;
font-family: 楷体;
color: rgb(0, 0, 0);
100%;
}
div{
33%;
}
section p2{
margin:0;
font-size: 30px;
font-family: 楷体;
color: rgb(3, 3, 3);
33%;
}
section p3{
margin:0;
font-size: 25px;
font-family: 楷体;
color: rgb(0, 0, 0);
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['power'];
p1[2].textContent = "儿子:" + jsonObj['son'];
p1[3].textContent = "妻子:" + jsonObj['wife'];
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);
}