使用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相关的访问信息,就可以获取到. 比如: 在记笔记的时候,点击保存后,会发出一些请求,然后有相应的相应,任 ...
随机推荐
- PHP开发微信公众号
PHP开发微信公众号:配置和部署服务器及Token认证 https://zhuanlan.zhihu.com/p/28259840
- 【Spark-core学习之四】 Spark任务提交
环境 虚拟机:VMware 10 Linux版本:CentOS-6.5-x86_64 客户端:Xshell4 FTP:Xftp4 jdk1.8 scala-2.10.4(依赖jdk1.8) spark ...
- 记录tiny6410 jlink 命令行调试linux-2.6.38内核
1＼首先启动nandflash uboot->linux内核->文件系统,进入文件系统命令行 2＼启动JLinkGDBServer -device ARM11 3\启动arm-none-e ...
- Java web开发环境搭配
1.安装并配置JDK环境(1)安装过程省略(建议安装在自己指定的统一目录下,方便后期查找). (2)配置环境变量 JAVA_HOME: C:\Java\jdk\jdk1.7.0_45 (jdk安装目 ...
- Python自然语言处理笔记【二】文本分类之监督式分类的细节问题
一.选择正确的特征 1.建立分类器的工作中如何选择相关特征,并且为其编码来表示这些特征是首要问题. 2.特征提取,要避免过拟合或者欠拟合 过拟合,是提供的特征太多,使得算法高度依赖训练数据的特性,而对 ...
- centos下载
标题: https://www.cnblogs.com/tony-brook/p/9849624.html DVD ISO:普通光盘完整安装版镜像,可离线安装到计算机硬盘上,包含大量的常用软件,一 ...
- MVC设计思路
MVC 学会重复.学会总结.学会预习和练习 前端页面 <----> 服务器(控制层.业务层.DAO层) <---> DB 说明:无论是框架还是servletJSP,用的 ...
- Linux 创建自定义命令
Linux 创建自定义命令 Linux 可以创建自定义使用命令 这里我们采取使用“alias”命令.这里我们首先了解两个文件,通过这两个文件我们可以根据环境配置相应的自定义命令. 该文件内创建的自定义 ...
- 解决多个div左浮动后不换行问题
问题描述:我这里有多个li 让其左浮动,并且有序没有间隙的排列,就出现了中间空隙的问题: 解决办法:让每一个的第1个元素加上 clear:both属性,我这里每一行有2个,所以是: .b li:nth ...
- Hi3519v101 SDK安装及升级
安装SDK 1.解压tgz压缩包 将 Hi3519V101_SDK_Vx.x.x.x.tgz 压缩包放入共享文件夹中,并解压到Linux内部如 /sdk 目录下,因为在共享目录中编译容易出现各种错误. ...