zoukankan      html  css  js  c++  java
  • 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 {
        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" : [
            "灭龙魔法",
            "灭龙奥义",
          ]
        }
      ]
    }
    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);
      }
    }
  • 相关阅读:
    php查找字符串中的http地址,并转换
    mojoPortalprovider模式学习之1.1 IndexBuilderConfiguration
    mojoportal学习笔记之一
    写博客了
    mojoPortal学习笔记之IndexBuilderProvider
    mojoportal学习笔记之IIndexableContent接口
    mojoportal学习笔记之How to Write a Provider Model
    flash图片新闻(源码)
    GridView控件日期格式化
    改变自己,学会调整自己,保持美好工作心情!
  • 原文地址:https://www.cnblogs.com/qwe123qwe/p/9983589.html
Copyright © 2011-2022 走看看