html：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>overlord</title>
<link rel="stylesheet" href="../css/overlord.css">
<link href="https://fonts.googleapis.com/css?family=Faster+One" rel="stylesheet">
</script>
</head>
<body>
<a href="abroad.html">返回上一页面</a>
<header>
</header>
<div class="better">
<div id="pic">
<img src="../image/安兹.jpg" width="200px" height="200px">
</div>
</div>
<div class="better">
<div id="pic">
<img src="../image/雅儿贝德.jpg" width="200px" height="200px">
</div>
</div>
<div class="better">
<div id="pic">
<img src="../image/夏提雅.jpg" width="200px" height="200px">
</div>
</div>
<section>
</section>
<div class="good">
<div id="pic">
<img src="../image/科塞特斯.jpg" width="200px" height="200px">
</div>
</div>
<div class="good">
<div id="pic1">
<img src="../image/亚乌拉.jpg" width="200px" height="200px">
</div>
</div>
<div class="good">
<div id="pic1">
<img src="../image/马雷.jpg" width="200px" height="200px">
</div>
</div>
</div>
<script src="../script/overlord.js">
</script>
</body>
</html>
css：
html {
font-family: 'helvetica neue', helvetica, arial, sans-serif;
}
body {
100%;
margin-left: 50px;
background-image: url(../image/shiyan1.jpg);
}
h1, h2 {
font-family: 'Faster One', cursive;
}
h1 {
font-size: 4rem;
text-align: center;
}
header p {
font-size: 1.3rem;
font-weight: bold;
text-align: center;
}
section article {
margin-left: 10px;
30%;
float: left;
height: 300px;
}
section p {
margin: 5px 0;
font-size: 20px;
}
h2 {
font-size: 2.5rem;
letter-spacing: -5px;
margin-bottom: 20px;
}
.better{
margin-left: 10px;
30%;
float: left;
height: 200px;
}
.good{
margin-left: 10px;
30%;
float: left;
height: 300px;
}
JS：
var header = document.querySelector('header');
var section = document.querySelector('section');
//创建请求
var requestURL = 'https://raw.githubusercontent.com/scp515293776/web/master/OverLord8.json';
var request = new XMLHttpRequest();//创建新的请求对象实例
request.open('GET', requestURL);//open()方法打开一个新请求,至少需要两个参数
request.responseType = 'json';//设置responseType为JSON，以便XHR知道服务器将返回JSON
request.send();//发送请求
//将响应存储在我们的请求中，该变量名为overlord
request.onload = function() {
var overlord = request.response;
populateHeader(overlord);
showHeroes(overlord);
}
function populateHeader(jsonObj) {
var overH1 = document.createElement('h1');//创建一个<h1>元素createElement()
overH1.textContent = jsonObj['name'];//设置textContent为等于name对象的属性
header.appendChild(overH1);//使用将其附加到标题appendChild()
var overPara = document.createElement('p');
overPara.textContent = 'Hometown: ' + jsonObj['author'] + ' // 出版日期: ' + jsonObj['date'];
header.appendChild(overPara);
}
function showHeroes(jsonObj) {
var character = jsonObj['role'];
//循环遍历role里的属性，将其分别放在h2,p,p,p,p中
for (var i = 0; i < character.length; i++) {
var overArticle = document.createElement('article');
var overH2 = document.createElement('h2');
var overPara1 = document.createElement('p');
var overPara2 = document.createElement('p');
var overPara3 = document.createElement('p');
var overPara4 = document.createElement('p');
overH2.textContent = character[i].name;
overPara1.textContent = 'Secret identity: ' + character[i].identity;
overPara2.textContent = 'Age: ' + character[i].level;
overPara3.textContent = 'Superpowers:' + character[i].speciality;
overPara4.textContent = '种族:'+character[i].race;
overArticle.appendChild(overH2);
overArticle.appendChild(overPara1);
overArticle.appendChild(overPara2);
overArticle.appendChild(overPara3);
overArticle.appendChild(overPara4);
section.appendChild(overArticle);
}
}
json：
{
"name": "overlord",
"author": "Metro City",
"date": 2015,
"role": [
{
"name": "安兹·乌尔·恭",
"level": "100(种族等级40+职业等级60)",
"identity": "“纳萨力克地下大坟墓”统治者",
"speciality":"情报分析",
"race":"死之统治者"
},
{
"name": "雅儿贝德",
"level": "100（种族等级30+职业等级70）",
"identity": "“纳萨力克地下大坟墓”守护者总管",
"speciality":"肉搏",
"race":"小恶魔"
},
{
"name": "夏提雅·布拉德弗伦",
"level": "100（种族等级20+职业等级80）",
"identity": "大坟墓第一至三阶层守护者",
"speciality":"肉搏",
"race":"吸血鬼真祖"
},
{
"name": "科塞特斯",
"level": "100（种族等级30+职业等级70）",
"identity": "大坟墓第五阶层守护者",
"speciality":"肉搏",
"race":"虫王"
},
{
"name": "亚乌菈·贝拉·菲欧拉",
"level": "100（种族等级0+职业等级100）",
"identity": "大坟墓六阶层守护者",
"speciality":"支配魔兽",
"race":"黑暗精灵"
},
{
"name": "马雷·贝罗·菲欧雷",
"level": "100（种族等级0+职业等级100）",
"identity": "大坟墓六阶层守护者",
"speciality":"大地与植物的自然系魔法",
"race":"黑暗精灵"
}
]
}
网页图：
