NEKO CYAN

咸鱼阿猫

导航

----改写superheros的json以及上传到github----

以下为js代码:

var header = document.querySelector('header');
var section = document.querySelector('section');
var requestURL = 'https://raw.githubusercontent.com/PLAYERYENNEY/QIMO/master/shikigami.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 = '输出  /   ' + jsonObj['homeTown'] + ' /  辅助  / ' + jsonObj['formed'];
    header.appendChild(myPara);
}
//对象创建对象(节点)myH1,赋值,放入header成为子对象

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 = 'TYPE: ' + heroes[i].secretIdentity;
        myPara2.textContent = 'HOW: ' + heroes[i].age;
        myPara3.textContent = 'EG:';
        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);
    }
}
//声明变量数组1 heroes并赋值members,数组2 superpowers并赋值

 

上传到github文件地址为:https://github.com/PLAYERYENNEY/QIMO/blob/master/shikigami.json

代码如下:

{
  "squadName" : "SHIKIGAMI",
  "homeTown" : "控制",
  "formed" : "治疗" ,
  "secretBase" : "Super tower",
  "active" : true,
  "members" : [
    {
      "name" : "输出",
      "age" : "对敌方造成伤害",
      "secretIdentity" : "主要属性堆积:暴击,暴伤,攻击",
      "powers" : [
        "荒 / SUSABI",
        "大天狗 / OOTENGU",
        "茨木童子 / LBARAKI DOJI"
      ]
    },
    {
      "name" : "控制",
      "age" : "对敌方造成混乱,沉默等控制效果",
      "secretIdentity" : "主要属性堆积:效果命中,速度",
      "powers" : [
        "阎魔 / ENMA",
        "雪女 / YUKI ONNA",
        "兵俑 / SAMURAI X"
      ]
    },
    {
      "name" : "辅助",
      "age" : "对己方加强状态或者为己方增加护盾",
      "secretIdentity" : "主要属性堆积:暴击,生命,暴伤",
      "powers" : [
        "辉夜姬 / KAGUYA",
        "一目连 / LCHIMOKUREN",
        "追月神 / OITSUKI"
      ]
    },
    {
      "name" : "治疗",
      "age" : "为己方回复生命",
      "secretIdentity" : "主要属性堆积:生命,暴击,暴伤",
      "powers" : [
        "花鸟卷 / HANA",
        "桃花妖 / MOMO",
        "樱花妖 / SAKURA"
      ]
    }
  ]
}

运行效果详情于期末项目3.0版本,具体为shikigami.html

posted on 2018-12-29 17:37  neko-cyan  阅读(264)  评论(0编辑  收藏  举报