使用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相关的访问信息,就可以获取到. 比如: 在记笔记的时候,点击保存后,会发出一些请求,然后有相应的相应,任 ...

随机推荐

PTA第三个编程题总结
7-1 抓老鼠啊~亏了还是赚了? (20 分) 某地老鼠成灾,现悬赏抓老鼠,每抓到一只奖励10元,于是开始跟老鼠斗智斗勇:每天在墙角可选择以下三个操作:放置一个带有一块奶酪的捕鼠夹(T),或者放置一块 ...
C#简单打印出LIST集合
循环打印集合,打印数组,随手写写,新手可以看看, 结果是不是有一些多余的0,把 int [][] ints =new int[3][]; 改为new int[2][]; 运行出错,哈哈. int ...
怎样从外网访问内网Rails
外网访问内网Rails 本地安装了Rails,只能在局域网内访问,怎样从外网也能访问本地Rails? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Rails 默认安装的Rails端口 ...
CSS hover
CSS hover hover 鼠标移动到当前标签上时,以下css属性才能生效 <!DOCTYPE html> <html lang="en"> <h ...
Docker 构建镜像
Docker 构建镜像 1.首先,在项目的根目录下,新建一个文本文件.dockerignore,写入下面的内容. 下面三行代码表示: 1.这三个路径要排除,不要打包进入 image 文件. 2.如果你 ...
freeswqitch odbc
1.安装驱动 yum install unixODBC unixODBC-devel libtool-ltdl libtool-ltdl-devel -y yum install mysql-conn ...
【2.0】使用默认日志slf4j配置
一.SpringBoot日志简介 SpringBoot使用Commons Logging进行所有内部日志记录,但底层日志实现保持开放状态.为Java Util Logging,Log4j2和Logba ...
【Bilinear interpolation】双线性插值详解（转）
最近在做视频拼接的项目,里面用到了图像的单应性矩阵变换,在最后的图像重映射,由于目标图像的坐标是非整数的,所以需要用到插值的方法,用的就是双线性插值,下面的博文主要是查看了前辈的博客对双 ...
P2292 [HNOI2004]L语言
传送门思路: 毒瘤的字典树! ▲主要分有两个步骤: ① 日常的建树. ② 暴力地求解. ▲日常建树:过于基础,跳过. ▲重点在于如何暴力地求解而不被卡掉(DP?不存在的) 可以利用区间动规的思想, ...
微信H5页面嵌入百度地图---解决手机的webKit定位，ios系统对非https网站不提供支持问题
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=yGQt ...

使用json改写网站

使用json改写网站的更多相关文章

随机推荐

热门专题