zoukankan      html  css  js  c++  java
  • ----改写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

  • 相关阅读:
    解决线程安全问题——同步方法
    Console Add Item –Java使用eBay API SDK刊登商品 详解
    解决Eclipse中新建jsp文件ISO8859-1 编码问题
    struts.xml配置详解
    public class Ex2
    ax2+bx+c=0的根的算法
    猜随机数
    中国的个税计算方法
    Javascript String类的属性及方法
    CSS各个浏览器Hack的写法
  • 原文地址:https://www.cnblogs.com/player-yenney/p/10197251.html
Copyright © 2011-2022 走看看