zoukankan      html  css  js  c++  java
  • 第十周作业

    json代码:

    {
      "squadName" : "intriduce the QQ speed",
      "The publishing company" : "Tencent____",
      "data" : 2017,
      "secretBase" : "Super tower",
      "active" : true,
      "members" : [
        {
          "name" : "Personal racing",
          "countDown" : "10",
          "feature" : "gas collection",
          "powers" : [
            "drifting",
            "gas escape",
            "strike"
          ]
        },
        {
         "name" : "team racing",
          "countDown" : "10",
          "feature" : "blue gas collection",
          "powers" : [
            "temp helps",
            "common victory",
            "havae a sense of unity"
          ]
        },
        {
          "name" : "Encounter racing",
          "countDown" : "10",
          "feature" : "Transmission and Acceleration",
          "powers" : [
            "talk with opposite sex",
            "make frieds",
            "may get married"
          ]
        }
      ]
    }
    js代码:
    var header = document.querySelector('header');
    var section = document.querySelector('section');
    var requestURL = 'https://raw.githubusercontent.com/qwe13404033685/qwwert/master/yuan.json';
    var request = new XMLHttpRequest();
    request.open('GET',requestURL);
    request.responseType = 'json';
    request.send();
    request.onload = function() {
      var superHeroes = request.response;
      populateHeader(superHeroes);
      showHeroes(superHeroes);
    }
    function populateHeader(jsonObj) {
      var myH1 = document.createElement('h1');
      myH1.textContent = jsonObj['squadName'];
      header.appendChild(myH1);
      var myPara = document.createElement('p');
      myPara.textContent = 'The publishing company:' + jsonObj['The publishing company'] + ' data: ' + jsonObj['data'];
      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 = 'feature: ' + heroes[i].feature;
        myPara2.textContent = 'count down: ' + heroes[i].countDown;
        myPara3.textContent = 'The racing way';
            
        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);
      }
    }
  • 相关阅读:
    CentOS同步时间
    使用dnsmasq来提升CentOS上网速度
    bash的变量设置
    CentOS找回root密码
    知识学习网站
    webservice接口测试,使用SoapUI工具进行接口测试
    js中字符串转换为数字
    css颜色大全
    Table分页显示调整
    iframe中,页面转换后回到页面的顶部
  • 原文地址:https://www.cnblogs.com/thelover527/p/10186925.html
Copyright © 2011-2022 走看看