使用json改写网站
效果图
json文件
https://raw.githubusercontent.com/sherryloslrs/timetable/master/timetable.json
{
"TimeTable " : "Time Table",
"formed" : 2018,
"active" : true,
"members" : [
{
"week" : "Monday",
"shows" : [
"《行尸走肉》",
"《神秘博士》",
"《国务卿女士》",
"《末日孤舰》",
"《辛普森一家》",
"《名利场》",
"《堕落街传奇》"
]
},
{
"week" : "Tuesday",
"shows" : [
"《绝命律师》",
"《49号旅舍》",
"《与星共舞》",
"《驻院医生》",
"《紧急呼救》",
"《庭审专家》",
"《东邻西舍》"
]
},
{
"week" : "Wedesday",
"shows" : [
"《闪电侠》",
"《黑霹雳》",
"《我们这一天》",
"《人类清除计划》",
"《天赋异禀》",
"《联邦调查局》",
"《医院革命》"
]
},
{
"week" : "Thursday",
"shows" : [
"《海豹突击队》",
"《幸存者》",
"《海豹突击队》",
"《芝加哥烈焰》",
"《嘻哈帝国》",
"《南方公园》",
"《美恐8：启示录》"
]
},
{
"week" : "Friday",
"shows" : [
"《邪恶力量》",
"《生活大爆炸》",
"《小谢尔顿》",
"《反恐特警组》",
"《实习医生格蕾》",
"《法律与秩序》",
"《一元背后》"
]
},
{
"week" : "Saturday",
"shows" : [
"《高堡奇人》",
"《初来乍到》",
"《天堂执法者》",
"《纽约屁民》",
"《无言有爱》",
"《地狱厨房》",
"《凡妮莎海辛》"
]
}
]
}
js文件
var header = document.querySelector('header');
var section = document.querySelector('section');
var requestURL = 'https://raw.githubusercontent.com/sherryloslrs/timetable/master/timetable.json';
var request = new XMLHttpRequest();
request.open('GET', requestURL);
request.responseType = 'json';
request.send();
request.onload = function() {
var timetable = request.response;
populateHeader(timetable);
showTable(timetable);
}
function populateHeader(jsonObj) {
var myH1 = document.createElement('h1');
myH1.textContent = "Time Table";
header.appendChild(myH1);
var myPara = document.createElement('p');
myPara.textContent = ' // Year: ' + jsonObj['formed'];
header.appendChild(myPara);
}
function showTable(jsonObj) {
var dramas = jsonObj['members'];
for(var i = 0; i < dramas.length; i++) {
var myArticle = document.createElement('article');
var myH2 = document.createElement('h2');
var myList = document.createElement('ul');
myH2.textContent = dramas[i].week;
var theShows = dramas[i].shows;
for(var j = 0; j < theShows.length; j++) {
var listItem = document.createElement('li');
listItem.textContent = theShows[j];
myList.appendChild(listItem);
}
myArticle.appendChild(myH2);
myArticle.appendChild(myList);
section.appendChild(myArticle);
}
}
html文件
<!DOCTYPE html>
<html>
<head>
<title>播放时间表</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="1.css">
<link rel="stylesheet" type="text/css" href="w3.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<style>
body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", sans-serif}
body, html {
height: 100%;
line-height: 1.8;
}
/* Full height image header */
.bgimg-1 {
background-position: center;
background-size: cover;
background-image: url("images/main1.png");
min-height: 100%;
}
.w3-bar .w3-button {
padding: 16px;
}
</style>
<body> <div class="w3-top">
<div class="w3-bar w3-white w3-card" id="myNavbar">
<a href="index.html" class="w3-bar-item w3-button w3-wide">HOME</a>
<!-- Right-sided navbar links -->
<div class="w3-right w3-hide-small">
<a href="crime.html" class="w3-bar-item w3-button">CRIME</a>
<a href="fiction.html" class="w3-bar-item w3-button"> FICTION</a>
<a href="melodrama.html" class="w3-bar-item w3-button"> MELODRAMA</a>
<a href="emotional.html" class="w3-bar-item w3-button">EMOTIONAL</a>
<a href="timetable.html" class="w3-bar-item w3-button">TIMETABLE</a>
</div>
<!-- Hide right-floated links on small screens and replace them with a menu icon --> <a href="javascript:void(0)" class="w3-bar-item w3-button w3-right w3-hide-large w3-hide-medium" onclick="w3_open()">
<i class="fa fa-bars"></i>
</a>
</div>
</div> <!-- Sidebar on small screens when clicking the menu icon -->
<nav class="w3-sidebar w3-bar-block w3-black w3-card w3-animate-left w3-hide-medium w3-hide-large" style="display:none" id="mySidebar">
<a href="javascript:void(0)" onclick="w3_close()" class="w3-bar-item w3-button w3-large w3-padding-16">Close ×</a>
<a href="crime.html" onclick="w3_close()" class="w3-bar-item w3-button">CRIME</a>
<a href="fiction.html" onclick="w3_close()" class="w3-bar-item w3-button">FICTION</a>
<a href="melodrama.html" onclick="w3_close()" class="w3-bar-item w3-button">MELODRAMA</a>
<a href="emotional.html" onclick="w3_close()" class="w3-bar-item w3-button">EMOTIONAL</a>
<a href="timetable.html" onclick="w3_close()" class="w3-bar-item w3-button">TIMETABLE</a>
</nav> <header> </header> <section> </section> <script src="timetable.js"> </script> </body>
</html>
使用json改写网站的更多相关文章
- 推荐一款在线编辑JSON的网站
推荐一款在线编辑JSON的网站 https://github.com/DavidDurman/FlexiJsonEditor 开源地址:https://github.com/DavidDurman/F ...
- moco搭建json api网站用于接口测试
java -jar moco-runner-1.0.0-standalone.jar http -p 12306 -c config/conf.json 配置文件 [ { "request& ...
- json 使用 （下）
使用JSON JSON也就是JavaScript Object Notation,是一个描述数据的轻量级语法.JSON的优雅是因为它是JavaScript语言的一个子集.接下来你将看到它为什么如此重要 ...
- JSON入门学习
JSON是一种与开发语言无关的轻量级的数据格式(JavaScript Object Notation) 优点:易于阅读和编写,易于程序解析和生产 JSON数据格式中没有日期及时间的数据格式的.一般直接 ...
- 我的第一个 JSP (SSH) 个人网站【开源】
唠叨两句背景 相当长时间没上来发帖了,最近几个月除了完成产品经理一个又一个重复又重复的app开发任务之外,最大的工作莫过于充分利用上笔主的业余时间,系统性地跟李刚同志学习JavaEE的SSH框架开发技 ...
- Android开源库--Gson谷歌官方json解析库
官方文档地址:http://google-gson.googlecode.com/svn/trunk/gson/docs/javadocs/index.html 官方网站:http://code.go ...
- xml 和 json 的区别
JSON(Javascript Object Notation) 是一种轻量级的数据交换格式.易于人阅读和编写.同时也易于机器解析和生成.它基于Javascript Programming Langu ...
- ASP.NET Web Api返回对象类型为JSON还是XML
在Umbraco平台上开发过程中,我用WebApi返回JSON result给前端 前端使用React调用这个web api来获取JSON result 我写的web api方法是返回JSON 类型的 ...
- 获取json格式字符串的简单方法
有的时候需要找一些Json格式的字符串,可以打开任意一个网页进入到调试模式,然后看network相关的访问信息,就可以获取到. 比如: 在记笔记的时候,点击保存后,会发出一些请求,然后有相应的相应,任 ...
随机推荐
- Form数据迁移
--------------------------------------添加linkserver--------------------------------------- --EXEC mas ...
- 第三方jar上传至公司maven仓库(私库)解决办法
在实际开发过程中,我们经常会遇到需要引用的jar依赖,在我们公司的maven仓库不存在,这个时候我们就需要把jar上传上去,在项目中添加对应依赖就OK了. 步骤1:下载jar 在http://mvnr ...
- LinQ各种方式查询、组合查询、IQueryable集合类型
1.模糊查询(包含) Repeater1.DataSource = con.car.Where(r =>r.name.Contains(s)).ToList(); 2.开头查询 Repeater ...
- VKD224B触摸芯片调试笔记
1.通过阅读datasheet了解芯片怎么使用,一般datasheet会提供参考电路.和相应的电气参数. 通过上面的表格可以知道芯片的供电,所需电流. 这个芯片可以通过引脚选择模式.通过上面的选项设置 ...
- Docker Registry V2 with Nginx
安装 nginx 修改/etc/yum.repos.d/nginx.repo [nginx] name=nginx repo baseurl=http://nginx.org/packages/cen ...
- js 计算后样式封装
function getStyle(obj,attr){ // 需要获取的元素 属性 if(obj.currentStyle){ return obj.currentStyle[attr]; }els ...
- linux 新建用户、用户组 以及为新用户分配权限的基本操作
分享下Linux系统中创建用户.设置密码.修改用户.删除用户的命令: 创建用户:useradd testuser 创建用户testuser设置密码:passwd testuser 给已创建的用户t ...
- 大数据新手之路一：安装JDK
Ubuntu16.04 1.下载jdk-8u192-linux-x64.tar.gz https://www.oracle.com/technetwork/java/javase/downloads/ ...
- try与except处理异常语句
ji 简介 与其他语言相同,在python中,try/except语句主要是用于处理程序正常执行过程中出现的一些异常情况,如语法错(python作为脚本语言没有编译的环节,在执行过程中对语法进行检测, ...
- （转）决定系数R2
有些讲得太烂了,我来通俗的梳理一下R2. Calculating R-squared 在线性回归的模型下,我们可以计算SE(line), SE(y均值). The statistic R2descri ...