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