Our supersheet
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Our supersheet</title>
<link href="https://fonts.googleapis.com/css?family=Faster+One" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
</head> <body>
<header > </header><!-- /header --> <section> </section>
<script src="script/main.js"> </script>
</body>
</html>
style.css
/* || general styles */ html {
font-family: 'helvetica neue', helvetica, arial, sans-serif;
} body {
width: 800px;
margin: 0 auto;
} h1, h2 {
font-family: 'Faster One', cursive;
} /* header styles */ h1 {
font-size: 4rem;
text-align: center;
} header p {
font-size: 1.3rem;
font-weight: bold;
text-align: center;
} /* section styles */ section article {
width: 33%;
float: left;
} section p {
margin: 5px 0;
} section ul {
margin-top:;
} h2 {
font-size: 2.5rem;
letter-spacing: -5px;
margin-bottom: 10px;
}
main.js
var header = document.querySelector('header');
var section = document.querySelector('section'); var requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';
var request = new XMLHttpRequest();//API,创建请求,只需要更新小部分而无需加载整个页面
request.open('GET', requestURL);//初始化请求,get--HTTP方法
request.responseType = 'text';//响应类型
request.send();//send方法,发送请求 request.onload = function() {//request,声明的对象;onload,自定义的方法
var superHeroesText = request.response;//response,属性
var superHeroes = JSON.parse(superHeroesText);
populateHeader(superHeroes);//自定义函数,调用
showHeroes(superHeroes);//superHeroes作用域在function,基于json的js对象
}
/**
* [populateHeader description]
* @param {[type]} jsonObj [description]
* @return {[type]} [description]
*/
function populateHeader(jsonObj) {//函数定义,形参
var myH1 = document.createElement('h1');//声明变量myH1,赋值h1元素
myH1.textContent = jsonObj['squadName'];//文本内容属性,赋值squadName对象的属性
header.appendChild(myH1);//header结点,增加一个myH1子节点,将其附加到标题appendChild() var myPara = document.createElement('p');//
myPara.textContent = 'Hometown: ' + jsonObj['homeTown'] + ' // Formed: ' + jsonObj['formed'];//把对象home Town和formed属性的lianjiezifuc
header.appendChild(myPara); }
/**
* [showHeroes description]
* @param {[type]} jsonObj [description]
* @return {[type]} [description]
*/
function showHeroes(jsonObj) {//创建并显示超级英雄卡
var heroes = jsonObj['members']; for (var i = 0; i < heroes.length; i++) {//members数组对象;创建了几个新元素article、h2。。。。
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 = 'Secret identity: ' + heroes[i].secretIdentity;
myPara2.textContent = 'Age: ' + heroes[i].age;
myPara3.textContent = 'Superpowers:';//值为数组,又用一个循环处理 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中增加子节点,把获取的值显现在html中
myArticle.appendChild(myPara1);
myArticle.appendChild(myPara2);
myArticle.appendChild(myPara3);
myArticle.appendChild(myList); section.appendChild(myArticle);//把myArticle的值放入section
}
}
json文件(https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json)
{
"squadName" : "Super hero squad",
"homeTown" : "Metro City",
"formed" : 2016,
"secretBase" : "Super tower",
"active" : true,
"members" : [
{
"name" : "Molecule Man",
"age" : 29,
"secretIdentity" : "Dan Jukes",
"powers" : [
"Radiation resistance",
"Turning tiny",
"Radiation blast"
]
},
{
"name" : "Madame Uppercut",
"age" : 39,
"secretIdentity" : "Jane Wilson",
"powers" : [
"Million tonne punch",
"Damage resistance",
"Superhuman reflexes"
]
},
{
"name" : "Eternal Flame",
"age" : 1000000,
"secretIdentity" : "Unknown",
"powers" : [
"Immortality",
"Heat Immunity",
"Inferno",
"Teleportation",
"Interdimensional travel"
]
}
]
}
结果如下:https://mdn.github.io/learning-area/javascript/oojs/json/heroes-finished-json-parse.html
Our supersheet的更多相关文章
随机推荐
- Windows中的时间(SYSTEMTIME和FILETIME) (转载)
转载:http://blog.csdn.net/bokee/article/details/5330791 两种时间系统之间没有本质区别(事实上CRT时间是用Windows时间实现的,当然这是说的VC ...
- 使用qmlscene预览qml文件
功能:可以预览qml文件的界面 使用:qmlscene myapp.qml
- iis发布,部署
1.项目发布:选择iis:文件系统:文件路径:realese 2.iis添加: 3.host文件添加 问题1: 不能在此路径中使用此配置节.如果在父级别上锁定了该节,便会出现这种情况.锁定 在全新安装 ...
- 机器学习-数据可视化神器matplotlib学习之路(一)
直接上代码吧,说明写在备注就好了,这次主要学习一下基本的画图方法和常用的图例图标等 from matplotlib import pyplot as plt import numpy as np #这 ...
- Linux(CentOS 6.5) 下安装MySql 5.7.18 二进制版本粗浅攻略
鉴于Linux和mysql因不同版本,安装方式也不同,所以在阅读本攻略前,请确保各位同学的版本和我的Linux.MySql 版本一致. 如果不一致,只能参考. 我的版本: Linux CentOS 6 ...
- python写入csv文件的几种方法总结
生成test.csv文件 #coding=utf- import pandas as pd #任意的多组列表 a = [,,] b = [,,] #字典中的key值即为csv中列名 dataframe ...
- html 表格中添加圆
效果: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" con ...
- Ubuntu 14.04 定时任务
如何在Ubuntu上启动一个定时任务,使得可以定时删除机器上的日志 首先, #查看cron状态 service cron status 如果提示没有安装 #安装cron服务 apt-get ins ...
- URAL 1029 Ministry
URAL 1029 思路: dp+记录路径 状态:dp[i][j]表示到(i,j)这个位置为止的最少花费 初始状态:dp[1][i]=a[1][i](1<=i<=m) 状态转移:dp[i] ...
- HDU 6106 Classes
Classes 思路:a中包含的元素:只参加a的,只参加a且b的,只参加a且c的,只参加a且b且c的: b中包含的元素:只参加b的,只参加a且b的,只参加b且c的,只参加a且b且c的: c中包含的元素 ...