json
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我喜欢的二次元人物</title>
<link href="https://fonts.googleapis.com/css?family=Faster+One" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
</header>
<section>
</section>
<script src="script/main.js">
</script>
</body>
</html>
css:
h1 {
font-size: 4rem;
text-align: center;
}
header p {
font-size: 1.3rem;
font-weight: bold;
text-align: center;
}
/* section styles */
section article {
width: 33%;
float: left;
}
section p {
margin: 5px 0;
}
section ul {
margin-top: 0;
}
h2 {
font-size: 2.5rem;
letter-spacing: -5px;
margin-bottom: 10px;
}
js:{
"squadName" : "二次元动漫人物",
"homeTown" : "二次元",
"formed" : 2018,
"secretBase" : "Super tower",
"active" : true,
"members" : [
{
"name" : "蒙奇·D·路飞",
"age" : 17,
"secretIdentity" : "草帽海贼团、草帽大船团船长",
"powers" : [
"橡胶果实",
"霸气",
]
},
{
"name" : "漩涡鸣人",
"age" : 12岁-13岁（第一部）→16岁-17岁（第二部）→19岁（剧场版10）→32岁（剧场版11/博人传） ,
"secretIdentity" : "第三代九尾人柱力、阿修罗转世",
"powers" : [
"仙人模式",
"人力柱",
"血继限界",
]
},
{
"name" : "艾特利亚斯·纳兹‧多拉格尼尔",
"age" : 不详,
"secretIdentity" : "火之灭龙魔导士、E.N.D ",
"powers" : [
"灭龙魔法",
"灭龙奥义",
]
}
]
}
"squadName" : "二次元动漫人物",
"homeTown" : "二次元",
"formed" : 2018,
"secretBase" : "Super tower",
"active" : true,
"members" : [
{
"name" : "蒙奇·D·路飞",
"age" : 17,
"secretIdentity" : "草帽海贼团、草帽大船团船长",
"powers" : [
"橡胶果实",
"霸气",
]
},
{
"name" : "漩涡鸣人",
"age" : 12岁-13岁（第一部）→16岁-17岁（第二部）→19岁（剧场版10）→32岁（剧场版11/博人传） ,
"secretIdentity" : "第三代九尾人柱力、阿修罗转世",
"powers" : [
"仙人模式",
"人力柱",
"血继限界",
]
},
{
"name" : "艾特利亚斯·纳兹‧多拉格尼尔",
"age" : 不详,
"secretIdentity" : "火之灭龙魔导士、E.N.D ",
"powers" : [
"灭龙魔法",
"灭龙奥义",
]
}
]
}
var header = document.querySelector('header');
var section = document.querySelector('section');
var requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';
var request = new XMLHttpRequest();
request.open('GET', requestURL);
request.responseType = 'json';
request.send();
request.onload = function() {
var superHeroes = request.response;
populateHeader(superHeroes);0
showHeroes(superHeroes);
}
function populateHeader(jsonObj) {
var myH1 = document.createElement('h1');
myH1.textContent = jsonObj['squadName'];
header.appendChild(myH1);
var myPara = document.createElement('p');
myPara.textContent = 'Hometown: ' + jsonObj['homeTown'] + ' // Formed: ' + jsonObj['formed'];
header.appendChild(myPara);
}
function showHeroes(jsonObj) {
var heroes = jsonObj['members'];
for(var i = 0; i < heroes.length; i++) {
var myArticle = document.createElement('article');
var myH2 = document.createElement('h2');
var myPara1 = document.createElement('p');
var myPara2 = document.createElement('p');
var myPara3 = document.createElement('p');
var myList = document.createElement('ul');
myH2.textContent = heroes[i].name;
myPara1.textContent = 'Secret identity: ' + heroes[i].secretIdentity;
myPara2.textContent = 'Age: ' + heroes[i].age;
myPara3.textContent = 'Superpowers:';
var superPowers = heroes[i].powers;
for(var j = 0; j < superPowers.length; j++) {
var listItem = document.createElement('li');
listItem.textContent = superPowers[j];
myList.appendChild(listItem);
}
myArticle.appendChild(myH2);
myArticle.appendChild(myPara1);
myArticle.appendChild(myPara2);
myArticle.appendChild(myPara3);
myArticle.appendChild(myList);
section.appendChild(myArticle);
}
}
