使用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相关的访问信息,就可以获取到. 比如: 在记笔记的时候,点击保存后,会发出一些请求,然后有相应的相应,任 ...
随机推荐
- SD卡与FAT32系统学习
2011-06-06 23:04 前2天,我了解了一下SD卡驱动的原理及FAT32文件系统的结构.接着准备主要已移植为主.通过LCD显示SD卡中的图片.但我需要分步进行. 0,使sd卡能读写数据.1, ...
- Python 堡垒机介绍
堡垒机说明 由于运维行业流动性很高,也为了防止有人在服务中残留后门,照成安全隐患,在这里我们使用堡垒机保证服务器管理安全. 我们知道运维人员在登陆服务时需要登陆用户,从客户端到服务端的过程中堡垒机,将 ...
- 5分钟学会vue中的路由守卫(导航守卫)
在项目开发中每一次路由的切换或者页面的刷新都需要判断用户是否已经登录,前端可以判断,后端也会进行判断的,我们前端最好也进行判断. vue-router提供了导航钩子:全局前置导航钩子 beforeEa ...
- Java基础学习-HelloWorld案例常见问题
注意:控制台曾经写过的命令,我们可以通过上下箭头进行选择,不需要重新进行输入,以节省时间,提高效率. 1.单词拼写问题 -class 不要写成Class -String ...
- 王之泰201771010131《面向对象程序设计（java）》第八周学习总结
第一部分:理论知识学习部分 第六章 第六章知识点主要分为1. 接口 2. lambda表达式 3. 内部类 4. 代理 1. 接口 1) Java为了克服单继承的缺点,Java使用了接口, 一个类可以 ...
- 聚合函数与F/Q表达式
聚合函数 取名: field + __ + 聚合函数名字 ,如:price__avg:可传关键字参数修改名字:avg=Avg("price"): aggregate:不会返回一个 ...
- windows(xshell)免密码登录
windows(xshell)免密码登录 第一步生成密钥文件 打开xshell 选个工具栏的工具如下图 选择密钥类型和长度,如下图 密钥会自动生成,如下图,点击下一步即可 设置给密钥加密的密码也可以不 ...
- java基础 （一）之HashMap
HashMap的存储结构是由数组和链表共同完成.Entry<K,V>[] ,Entry是单向链表. 1 HashMap数据结构 HashMap的底层主要是基于数组和链表来实现的,它之所以有 ...
- 使用qrcode输入信息生成二维码包含二维码说明信息，点击转化为图片并下载
说明:输入汉字和数字都可以识别并展示 <body> <h2 id="h2">二维码生成</h2> <br> <span id= ...
- 无限遍历，Python实现在多维嵌套字典、列表、元组的JSON中获取数据
背景 在做接口自动化的过程中,接口返回的数据是 列表字典循环嵌套 格式的,所以怎样通过一个key值,获取到被包裹了多层的目标数据成为了摆在我面前的一个问题. 一开始没想自己写,但是搜索后发现虽然很 ...