<!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">
    <link rel="stylesheet" type="text/css" href="main.js">
  </head>

  <body>

      <header>


      </header>

      <section>

      </section>

    <script src="main.js">
   
    </script>
  </body>
</html>

 

html {
  font-family: 'helvetica neue', helvetica, arial, sans-serif;
}

body {
  width: 800px;
  margin: 0 auto;
}

h1, h2 {
  font-family: 'Faster One', cursive;
}

/* header styles */

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

 

{
var
header = document.querySelector('header'); var section = document.querySelector('section'); var requestURL ='https://gist.githubusercontent.com/HL345/7774958ea5a7dcf1d03f625067e701f5/raw/cb81ed0bd64ad13a94e4c41e09b0ad3b6e08161d/2.json';//:""和''中的都是string var request = new XMLHttpRequest();//API接口 request.open('GET', requestURL);//获取URL中的内容 request.responseType = 'json'; request.send(); request.onload = function() { var superHeroes = request.response;//superheroes 变量作用于函数中 populateHeader(superHeroes);//前面无对象所以是函数/将superheros的内容填写到header中 showHeroes(superHeroes);//在网页上显示 } function populateHeader(jsonObj) { //自定义populateheader函数 var myH1 = document.createElement('h1');//创建h1元素并将给myH1赋值 myH1.textContent = jsonObj['squadName']; header.appendChild(myH1);//将myh1节点添加到header节点后 var myPara = document.createElement('p');//myPara是个对象//dom 的元素都是对象 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);//即是节点也是容器 } }