以下为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

----改写superheros的json以及上传到github----的更多相关文章

  1. C#picturebox控件图片以json格式上传java后台保存

    关于winform上传图片到Java后端,保存到数据库,有多种方法,本文主要介绍利用picturebox控件,点击按钮上传图片,将图片转化为base64格式,以json格式上传到Java后台,再从ja ...

  2. 如何通过Git GUI将自己本地的项目上传至Github

    最近在学习node.js和react,顺便复习了下AngluarJS相关的东西,写了些小demo想放在GitHub上,之前仅限于只申请了GitHub账号从没用过,今天花半天时间查资料认真学习Githu ...

  3. 将本地代码上传至github备份的操作方法

    这篇文章写得是windows下的使用方法. 第一步:创建Github新账户 第二步:新建仓库 第三步:填写名称,简介(可选),勾选Initialize this repository with a R ...

  4. 将本地项目上传到Github

    将本地项目上传到Github 转载请注明出自天外归云的博客. 前提 已经下载了Git到本地. 创建Repository 首先登陆我的Github页面,在Repositories中New一个并起Repo ...

  5. C++向main函数传递参数的方法(实例已上传至github)

    通常情况下,我们定义的main函数都只有空形参列表: int main(){...} 然而,有时我们确实需要给mian传递实参,一种常见的情况是用户设置一组选项来确定函数所要执行的操作.例如,假定ma ...

  6. 运用HBuilder上传到GitHub

    Hbuilder安装github插件 如图所示: 一.打开自己GitHub,新建一个"库" 2.设置自己项目名和简介 3.建完后,就会显示GitHub要上传路径 4.打开" ...

  7. 如何从本地把项目上传到github&&如何把github项目通过clone复制下来

    一.第一步---注册一个Github账号 首先要在GitHub上创建一个帐号,可以去官方网站注册一个账号. 二.git安装 下载地址:http://msysgit.github.io/ 二.第二步-- ...

  8. mac下安装git,并将本地的项目上传到github

    mac下安装git 安装过程: 1.下载Git installer http://git-scm.com/downloads 2.下载之后打开,双击.pkg安装 3.打开终端,使用git --vers ...

  9. 详细教程:将本地项目上传到github

    作为 一个工程师,将本地项目上传到github进行备份和分享是一个不错的技能,一来可以方便以后的工作,二来可以分享自己的成果.所以下面本人详细教大家如何将本地项目上传到github,十分简单,一学就会 ...

随机推荐

  1. Delphi TreeView 节点上下移动

    调用方法 procedure TfrmDataImport.B_ExcelDownClick(Sender: TObject); begin UpDownTVItem(TV_Import, 2); e ...

  2. (11)ssh免密登录配置

    ***在Linux命令行中登录到另一台虚拟机(需要用到ssh协议) Linux中默认有ssh的服务器端和客户端,客户端的名字就叫ssh 前提是当前使用的用户名在待连接的虚拟机中存在 格式:  ssh ...

  3. reg 和wire 区别

    reg相当于存储单元,wire相当于物理连线 Verilog 中变量的物理数据分为线型和寄存器型.这两种类型的变量在定义时要设置位宽,缺省为1位.变量的每一位可以是0,1,X,Z.其中x代表一个未被预 ...

  4. 13Linux_vsftpd_Samba_NFS实现文件共享_TFTP

    vsftpd服务程序: 匿名开放模式 本地用户模式 虚拟用户模式 简单文件传输协议 TFTP:UDP协议,端口69 TFTP服务使用xinetd服务程序来管理. Samba文件共享服务 NFS网络文件 ...

  5. PHP超全局变量$_SERVER分析

    $_SERVER 是一个包含了诸如头信息(header).路径(path).以及脚本位置(script locations)等等信息的数组.这个数组中的项目由 Web 服务器创建.不能保证每个服务器都 ...

  6. 深度学习原理与框架- batch_normalize(归一化操作)

    1. batch_normalize(归一化操作),公式:传统的归一化公式 (number - mean) / std, mean表示均值, std表示标准差 而此时的公式是 scale * (num ...

  7. Servlet学习记录4

    带进度条的文件上传 UploadServlet只实现了普通的文件上传,并附带普通文本域的提交.如果需要显示上传进度条,实时显示上传速度等,需要配合使用Ajax技术.这里仍然使用Apache的commo ...

  8. 逻辑读为何消耗CPU?

    在数据库系统中,经常会看到这个说法:“逻辑读很消耗CPU”,然后开始把这句话当作一个定理来使用.但是为什么“同样是读,为什么逻辑读会使用那么多CPU?” 查了一些资料,配合自己的理解,有下面几点体会: ...

  9. 解决easyUI中翻页后前面已钩选项自动变为未选择的问题

    在easyUI的datagrid中,必须在属性的第一条就要写 idField:'id' (只要创建数据表格,就必须要加idField),其中id是页面数据的主键名称. 这样设置之后,表格翻页之后,前面 ...

  10. docker搭建gitlab服务器(Centos7)

    系统环境:CentOS Linux release 7.6.1810 (Core) git版本:gitlab/gitlab-ce 一.安装和启动docker 见HTTPRUNNERMANAGER安装部 ...