使用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相关的访问信息,就可以获取到. 比如: 在记笔记的时候,点击保存后,会发出一些请求,然后有相应的相应,任 ...
随机推荐
- Docker Compose 一键部署多节点爬虫程序
Docker Compose 一键部署多节点爬虫程序 目录结构 [root@localhost ~]# tree compose_crawler/ compose_crawler/ ├── cento ...
- 树莓派（centos7）安装mysql
yum install mysql mysql-server 或者 yum install mariadb mariadb-server 安装完后启动mysql systemctl start mar ...
- linux基础之find
linux上文件查找工具: locate, find locate: 依赖于事先构建的索引,索引的构建在系统较为空闲时自动进行(周期性任务),手动更新数据库(updatedb) 索引构建过程需要遍历整 ...
- 如何在基于Bytom开发过程中集成IPFS
本文介绍了基于Bytom开发过程中集成IPFS. step1: 搭建bytom节点 比原相关资料:https://github.com/Bytom-Community/Bytom_Docs 搭建byt ...
- esay-ui学习笔记(一)
JavaScript prototype用法 prototype 属性使您有能力向对象添加属性和方法. object.prototype.name=value <script type=&quo ...
- STL.vector.iterator的序号
ZC:网上查到,使用vector时,只要将 find到的iterator(itX)减去vector::begin() 就可以得到itX的序号. 1.需求:得到 某个 iterator在 vector中 ...
- Kafka-Record(消息格式)
注:本文依赖于kafka-0.10.0.1-src kafka消息格式是经过多个版本的演变的,本文只说0.10.0.1版本的消息格式. 消息格式如图1所示: 图1 CRC:用于校验消息内容.占4个字节 ...
- JxBrowser之三：常用函数setNetworkDelegate
1.常用函数setNetworkDelegate,包含对网络传输数据状态的多种监控回调. 2.着重说一下其中的几个函数 BrowserContext browserContext = BrowserC ...
- Dynamic networks | 动态网络
Dynamic networks reveal key players in aging 系统生物学中的网络分析 网络的拓扑结构:topological properties, 网络的度:whole ...
- MYSQL 总结——2
1.mysql限制显示条目数:Limit, Offset 图片网址:https://sqlbolt.com/lesson/filtering_sorting_query_results 实例: SE ...