效果图
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>