11th week blog

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>
<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>

</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":"黑暗精灵"
    }
  ]
}

网页图：