<!DOCTYPE html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>Our supersheet</title>

 <link href="https://fonts.googleapis.com/css?family=Faster+One" rel="stylesheet">

 <link rel="stylesheet" type="text/css" href="style.css">

 </head>

 <body>

 <header >

 </header><!-- /header -->

 <section>

 </section>

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

 </script>

 </body>

 </html>

style.css

 /* || general styles */

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

 }

 h2 {

   font-size: 2.5rem;

   letter-spacing: -5px;

   margin-bottom: 10px;

 }

main.js

 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();//API,创建请求，只需要更新小部分而无需加载整个页面

 request.open('GET', requestURL);//初始化请求，get--HTTP方法

 request.responseType = 'text';//响应类型

 request.send();//send方法，发送请求

 request.onload = function() {//request，声明的对象；onload，自定义的方法

   var superHeroesText = request.response;//response，属性

   var superHeroes = JSON.parse(superHeroesText);

   populateHeader(superHeroes);//自定义函数，调用

   showHeroes(superHeroes);//superHeroes作用域在function，基于json的js对象

 }

 /**

  * [populateHeader description]

  * @param  {[type]} jsonObj [description]

  * @return {[type]}         [description]

  */

 function populateHeader(jsonObj) {//函数定义，形参

   var myH1 = document.createElement('h1');//声明变量myH1,赋值h1元素

   myH1.textContent = jsonObj['squadName'];//文本内容属性，赋值squadName对象的属性

   header.appendChild(myH1);//header结点，增加一个myH1子节点，将其附加到标题appendChild()

   var myPara = document.createElement('p');//

   myPara.textContent = 'Hometown: ' + jsonObj['homeTown'] + ' // Formed: ' + jsonObj['formed'];//把对象home Town和formed属性的lianjiezifuc

   header.appendChild(myPara);

 }

 /**

  * [showHeroes description]

  * @param  {[type]} jsonObj [description]

  * @return {[type]}         [description]

  */

 function showHeroes(jsonObj) {//创建并显示超级英雄卡

   var heroes = jsonObj['members'];

   for (var i = 0; i < heroes.length; i++) {//members数组对象；创建了几个新元素article、h2。。。。

     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中增加子节点，把获取的值显现在html中

     myArticle.appendChild(myPara1);

     myArticle.appendChild(myPara2);

     myArticle.appendChild(myPara3);

     myArticle.appendChild(myList);

     section.appendChild(myArticle);//把myArticle的值放入section

   }

 }

json文件（https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json）

 {

   "squadName" : "Super hero squad",

   "homeTown" : "Metro City",

   "formed" : 2016,

   "secretBase" : "Super tower",

   "active" : true,

   "members" : [

     {

       "name" : "Molecule Man",

       "age" : 29,

       "secretIdentity" : "Dan Jukes",

       "powers" : [

         "Radiation resistance",

         "Turning tiny",

         "Radiation blast"

       ]

     },

     {

       "name" : "Madame Uppercut",

       "age" : 39,

       "secretIdentity" : "Jane Wilson",

       "powers" : [

         "Million tonne punch",

         "Damage resistance",

         "Superhuman reflexes"

       ]

     },

     {

       "name" : "Eternal Flame",

       "age" : 1000000,

       "secretIdentity" : "Unknown",

       "powers" : [

         "Immortality",

         "Heat Immunity",

         "Inferno",

         "Teleportation",

         "Interdimensional travel"

       ]

     }

   ]

 }

结果如下：https://mdn.github.io/learning-area/javascript/oojs/json/heroes-finished-json-parse.html

Our supersheet的更多相关文章

随机推荐

  1. CEF之CefSettings设置locale

    参考:https://blog.csdn.net/xiezhongyuan07/article/details/84402083 在开发过程遇到一个问题,CEF加载一个静态页面,然后在静态页面上有一个 ...

  2. jQuery 源码分析：当 selector 传来一个函数时，怎么进行处理？

    本文章为 0.9 版本,将会在稍后润色更新.本文使用的 jQuery 版本为 3.4.0 我们知道使用 $ 操作符时,可以往里面塞很多类型的参数,字符串,对象,函数...,jQuery 会根据不同的参 ...

  3. Python3基础 str 循环输出list中每个单词及其长度

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...

  4. 分布式系统一致性协议--2PC,3PC

    分布式系统中最重要的一块,一致性协议,其中就包括了大名鼎鼎的Paxos算法. 2PC与3PC 在分布式系统中,每一个机器节点虽然能够明确知道自己在进行事务操作过程中的结果是成功或是失败,但是却无法直接 ...

  5. ReadResolve方法与序列化

    使用枚举实现的单例模式,不但可以防止利用反射强行构建单例对象,而且可以在枚举类对象被反序列化的时候,保证反序列的返回结果是同一对象. 对于其他方式实现的单例模式,如果既想要做到可序列化,又想要反序列化 ...

  6. JavaScript:正则表达式 问号

    问号 1.?表示重复前面内容的0次或一次(但尽可能多重复) var reg=/abc?/g; var str="abcdabcaba"; console.log(str.match ...

  7. 【第十二章】 springboot + mongodb（复杂查询）

    简单查询:使用自定义的XxxRepository接口即可.(见 第十一章 springboot + mongodb(简单查询)) 复杂查询:使用MongoTemplate以及一些查询条件构建类(Bas ...

  8. 51NOD 1057 N的阶乘

    1057 N的阶乘 基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题   输入N求N的阶乘的准确值.   Input 输入N(1 <= N <= 10000) ...

  9. [luogu 3957]跳房子

    题目链接 50分做法 挺显然的一个做法,因为金币量是单调的(如果你花i枚金币可以得到最优解,i+1枚也一定可以),所以可以二分答案 然后对于二分出来的每个答案,都做一遍dp,效率$O(n^2logn) ...

  10. CSS3 动画的一些属性

    定义式 @keyframes 动画名称{ from{ } to{ } } 调用式 动画类似函数,只定义不调用是没效果的,所以要配合调用式使用. animation: 动画名称 动画时间 延时 时间曲线 ...