----改写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