使用json改写网站

效果图

json文件

https://raw.githubusercontent.com/sherryloslrs/timetable/master/timetable.json

 1 {
 2   "TimeTable " : "Time Table",
 3   "formed" : 2018,
 4   "active" : true,
 5   "members" : [
 6     {
 7       "week" : "Monday",
 8       "shows" : [
 9         "《行尸走肉》",
10         "《神秘博士》",
11         "《国务卿女士》",
12           "《末日孤舰》",
13               "《辛普森一家》",
14             "《名利场》",
15         "《堕落街传奇》"
16       ]
17     },
18 
19     {
20       "week" : "Tuesday",
21       "shows" : [
22           "《绝命律师》",
23                 "《49号旅舍》",
24                 "《与星共舞》",
25                 "《驻院医生》",
26                 "《紧急呼救》",
27                 "《庭审专家》",
28                 "《东邻西舍》"
29       ]
30     },
31 
32     {
33       "week" : "Wedesday",
34       "shows" : [
35         "《闪电侠》",
36         "《黑霹雳》",
37         "《我们这一天》",
38         "《人类清除计划》",
39         "《天赋异禀》",
40         "《联邦调查局》",
41         "《医院革命》"
42       ]
43     },
44 
45     {
46       "week" : "Thursday",
47       "shows" : [
48         "《海豹突击队》",
49         "《幸存者》",
50         "《海豹突击队》",
51         "《芝加哥烈焰》",
52         "《嘻哈帝国》",
53         "《南方公园》",
54         "《美恐8：启示录》"
55       ]
56     },
57 
58     {
59       "week" : "Friday",
60       "shows" : [
61         "《邪恶力量》",
62         "《生活大爆炸》",
63         "《小谢尔顿》",
64         "《反恐特警组》",
65         "《实习医生格蕾》",
66         "《法律与秩序》",
67         "《一元背后》"
68       ]
69     },
70 
71     {
72       "week" : "Saturday",
73       "shows" : [
74         "《高堡奇人》",
75         "《初来乍到》",
76         "《天堂执法者》",
77         "《纽约屁民》",
78         "《无言有爱》",
79         "《地狱厨房》",
80         "《凡妮莎海辛》"
81       ]
82     }
83   ]
84 }

js文件

 1 var header = document.querySelector('header');
 2     var section = document.querySelector('section');
 3     var requestURL = 'https://raw.githubusercontent.com/sherryloslrs/timetable/master/timetable.json';
 4     var request = new XMLHttpRequest();
 5     request.open('GET', requestURL);
 6     request.responseType = 'json';
 7     request.send();
 8     request.onload = function() {
 9       var timetable = request.response;
10       populateHeader(timetable);
11       showTable(timetable);
12     }
13     function populateHeader(jsonObj) {
14       var myH1 = document.createElement('h1');
15       myH1.textContent = "Time  Table";
16       header.appendChild(myH1);
17       var myPara = document.createElement('p');
18       myPara.textContent =  ' // Year: ' + jsonObj['formed'];
19       header.appendChild(myPara);
20     }
21     function showTable(jsonObj) {
22       var dramas = jsonObj['members'];
23       for(var i = 0; i < dramas.length; i++) {
24         var myArticle = document.createElement('article');
25         var myH2 = document.createElement('h2');
26         var myList = document.createElement('ul');
27         myH2.textContent = dramas[i].week;
28         var theShows = dramas[i].shows;
29         for(var j = 0; j < theShows.length; j++) {
30           var listItem = document.createElement('li');
31           listItem.textContent = theShows[j];
32           myList.appendChild(listItem);
33         }
34         myArticle.appendChild(myH2);
35         myArticle.appendChild(myList);
36         section.appendChild(myArticle);
37       }
38     }

html文件

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>播放时间表</title>
 5     <meta charset="utf-8">
 6     <link rel="stylesheet" type="text/css" href="1.css">
 7     <link rel="stylesheet" type="text/css" href="w3.css">
 8     <link rel="stylesheet" type="text/css" href="style.css">
 9 </head>
10 <style>
11 body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", sans-serif}
12 body, html {
13     height: 100%;
14     line-height: 1.8;
15 }
16 /* Full height image header */
17 .bgimg-1 {
18     background-position: center;
19     background-size: cover;
20     background-image: url("images/main1.png");
21     min-height: 100%;
22 }
23 .w3-bar .w3-button {
24     padding: 16px;
25 }
26 </style>
27 <body>
28 
29 <div class="w3-top">
30   <div class="w3-bar w3-white w3-card" id="myNavbar">
31     <a href="index.html" class="w3-bar-item w3-button w3-wide">HOME</a>
32     <!-- Right-sided navbar links -->
33     <div class="w3-right w3-hide-small">
34       <a href="crime.html" class="w3-bar-item w3-button">CRIME</a>
35       <a href="fiction.html" class="w3-bar-item w3-button"> FICTION</a>
36       <a href="melodrama.html" class="w3-bar-item w3-button"> MELODRAMA</a>
37       <a href="emotional.html" class="w3-bar-item w3-button">EMOTIONAL</a>
38       <a href="timetable.html" class="w3-bar-item w3-button">TIMETABLE</a>
39     </div>
40     <!-- Hide right-floated links on small screens and replace them with a menu icon -->
41 
42     <a href="javascript:void(0)" class="w3-bar-item w3-button w3-right w3-hide-large w3-hide-medium" onclick="w3_open()">
43       <i class="fa fa-bars"></i>
44     </a>
45   </div>
46 </div>
47 
48 <!-- Sidebar on small screens when clicking the menu icon -->
49 <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">
50   <a href="javascript:void(0)" onclick="w3_close()" class="w3-bar-item w3-button w3-large w3-padding-16">Close ×</a>
51   <a href="crime.html" onclick="w3_close()" class="w3-bar-item w3-button">CRIME</a>
52   <a href="fiction.html" onclick="w3_close()" class="w3-bar-item w3-button">FICTION</a>
53   <a href="melodrama.html" onclick="w3_close()" class="w3-bar-item w3-button">MELODRAMA</a>
54   <a href="emotional.html" onclick="w3_close()" class="w3-bar-item w3-button">EMOTIONAL</a>
55   <a href="timetable.html" onclick="w3_close()" class="w3-bar-item w3-button">TIMETABLE</a>
56 </nav>
57 
58 
59 <header>
60 
61 </header>
62 
63 <section>
64 
65 </section>
66 
67 <script src="timetable.js">
68 
69 </script>
70 
71 
72 
73 </body>
74 </html>