weixin_42468639
zeijibashuai
2021-03-18 17:15
浏览 17

有data.js的数据如何用json的格式制作出来然后变成一个网页

<!DOCTYPE html>
<html lang="en">
	<head>
		<!-- The page head is configuring the content to be responsive. -->
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1">
		<title>Jedi Uni Timetable</title>

		<!-- Link to the CSS reset stylesheet: normalize.css
			Normalize.css is developed by Nicolas Gallagher.
			Available at URL: https://necolas.github.io/normalize.css/
			Date accessed: 15 March 2021
		-->
		<link rel="stylesheet" href="css/normalize.css">

		<!-- Link to the main stylesheet for the page. -->
		<link rel="stylesheet" href="css/main.css">
	</head>
	<body>
		<!-- Web page header: with a consistent header across all pages on the website. -->
		<header class="pg-header">
			<h1>Jedi University: Timetable</h1>
			<nav class="pg-main-nav">
				<ul>
					<li><a href="index.html">Home</a></li>
					<li><a href="timetable.html">Timetable</a></li>
					<li><a href="mailto:email@testwebsite.ca">Email us</a></li>
					<li><a href="https://www.google.ca" target="_blank" rel="noopener">Google search</a></li>
				</ul>
			</nav>
		</header>

		<!-- Main content for the web page. -->
		<main class="pg-main-content">
			<section class="s-info">
				<h2>Timetable</h2>
				<div id="timetable-data-container"></div>
			</section>
		</main>

		<!-- Web page footer: with a consistent footer across all pages on the website.  -->
		<footer class="pg-footer">
			&copy; Jedi University. Do or do not. There is no try.
		</footer>

		<!-- Linking to the data script file for the web page. This brings the JSON data into the execution context. -->
		<script src="js/data.js"></script>

		<!-- Linking to the main scripts file for the web page. -->
		<script src="js/scripts.js"></script>
	</body>
</html>

上面是Timetable的代码

var dataUni = [
	{
	  "courseCode": "CSCI0001",
	  "courseName": "DevSecAIOps and Management (1)",
	  "scheduleDays": "T Th",
	  "scheduleTime": "10:00-11:30",
	  "location": "Goldberg 127",
	  "enrollmentMax": 72,
	  "enrollmentCurrent": 45,
	  "enrollmentAvailability": 27,
	  "instructor": "Linda Myers"
	},
	{
	  "courseCode": "CSCI0002",
	  "courseName": "Precision Design and Management",
	  "scheduleDays": "M W F",
	  "scheduleTime": "11:30-12:30",
	  "location": "Online - Synchronous",
	  "enrollmentMax": 99,
	  "enrollmentCurrent": 75,
	  "enrollmentAvailability": 24,
	  "instructor": "Mary Rivera"
	},
	{
	  "courseCode": "CSCI0003",
	  "courseName": "Gamified Architecture",
	  "scheduleDays": "T Th",
	  "scheduleTime": "15:00-16:30",
	  "location": "Goldberg 134",
	  "enrollmentMax": 14,
	  "enrollmentCurrent": 10,
	  "enrollmentAvailability": 4,
	  "instructor": "Carol Leonard"
	},
	{
	  "courseCode": "CSCI0004",
	  "courseName": "Interconnected Virtual Reality Design and Management",
	  "scheduleDays": "T Th",
	  "scheduleTime": "13:00-14:30",
	  "location": "Goldberg 143",
	  "enrollmentMax": 59,
	  "enrollmentCurrent": 43,
	  "enrollmentAvailability": 16,
	  "instructor": "Barbara Mcdonald"
	},
	{
	  "courseCode": "CSCI0005",
	  "courseName": "Computational 5G Networks Research and Sustainability",
	  "scheduleDays": "M W",
	  "scheduleTime": "14:30-16:00",
	  "location": "Online - Synchronous",
	  "enrollmentMax": 20,
	  "enrollmentCurrent": 18,
	  "enrollmentAvailability": 2,
	  "instructor": "Amanda Johnson"
	},
	{
	  "courseCode": "CSCI0006",
	  "courseName": "Environmental Sustainability",
	  "scheduleDays": "T Th",
	  "scheduleTime": "08:30-10:00",
	  "location": "Goldberg 143",
	  "enrollmentMax": 33,
	  "enrollmentCurrent": 32,
	  "enrollmentAvailability": 1,
	  "instructor": "Stephanie Davis"
	},
	{
	  "courseCode": "CSCI0007",
	  "courseName": "The Fourth Wave of Industrialization",
	  "scheduleDays": "M W F",
	  "scheduleTime": "10:30-11:30",
	  "location": "Goldberg 134",
	  "enrollmentMax": 65,
	  "enrollmentCurrent": 31,
	  "enrollmentAvailability": 34,
	  "instructor": "Jessica Miller"
	},
	{
	  "courseCode": "CSCI0008",
	  "courseName": "Computational 5G Networks Research and Sustainability",
	  "scheduleDays": "M W F",
	  "scheduleTime": "11:30-12:30",
	  "location": "Online - Synchronous",
	  "enrollmentMax": 27,
	  "enrollmentCurrent": 26,
	  "enrollmentAvailability": 1,
	  "instructor": "Sarah Smith"
	},
	{
	  "courseCode": "CSCI0009",
	  "courseName": "Environmental Sustainability",
	  "scheduleDays": "M W F",
	  "scheduleTime": "12:30-13:30",
	  "location": "Goldberg 143",
	  "enrollmentMax": 61,
	  "enrollmentCurrent": 44,
	  "enrollmentAvailability": 17,
	  "instructor": "Elizabeth Wilson"
	},
	{
	  "courseCode": "CSCI0010",
	  "courseName": "Environmental Sustainability & Tech",
	  "scheduleDays": "T Th",
	  "scheduleTime": "13:30-15:00",
	  "location": "Goldberg 127",
	  "enrollmentMax": 14,
	  "enrollmentCurrent": 12,
	  "enrollmentAvailability": 2,
	  "instructor": "Ashley A Taylor"
	},
	{
	  "courseCode": "CSCI0011",
	  "courseName": "Environmental Sustainability & Digital Transformation",
	  "scheduleDays": "T Th",
	  "scheduleTime": "13:30-15:00",
	  "location": "Online - Synchronous",
	  "enrollmentMax": 120,
	  "enrollmentCurrent": 34,
	  "enrollmentAvailability": 86,
	  "instructor": "Ashley M Taylor"
	},
	{
	  "courseCode": "CSCI0012",
	  "courseName": "Cyber-physical Security Design",
	  "scheduleDays": "M Th",
	  "scheduleTime": "09:00-10:30",
	  "location": "Goldberg 134",
	  "enrollmentMax": 33,
	  "enrollmentCurrent": 16,
	  "enrollmentAvailability": 17,
	  "instructor": "Ashley S Taylor"
	},
	{
	  "courseCode": "CSCI0013",
	  "courseName": "Cyber-physical Systems",
	  "scheduleDays": "M W F",
	  "scheduleTime": "09:30-10:30",
	  "location": "Goldberg 127",
	  "enrollmentMax": 110,
	  "enrollmentCurrent": 57,
	  "enrollmentAvailability": 53,
	  "instructor": "Jessica Blaese"
	},
	{
	  "courseCode": "CSCI0014",
	  "courseName": "Immersive Experiences for Collaboration",
	  "scheduleDays": "M W F",
	  "scheduleTime": "09:30-10:30",
	  "location": "Online - Synchronous",
	  "enrollmentMax": 57,
	  "enrollmentCurrent": 52,
	  "enrollmentAvailability": 5,
	  "instructor": "Heather James"
	},
	{
	  "courseCode": "CSCI0015",
	  "courseName": "Entrepreneurship and Design",
	  "scheduleDays": "T Th",
	  "scheduleTime": "10:30-12:00",
	  "location": "Goldberg 143",
	  "enrollmentMax": 54,
	  "enrollmentCurrent": 40,
	  "enrollmentAvailability": 14,
	  "instructor": "Heather Jones"
	},
	{
	  "courseCode": "CSCI0016",
	  "courseName": "Analytics for Design",
	  "scheduleDays": "T Th",
	  "scheduleTime": "10:30-12:00",
	  "location": "Goldberg 127",
	  "enrollmentMax": 98,
	  "enrollmentCurrent": 80,
	  "enrollmentAvailability": 18,
	  "instructor": "Xiang Miller"
	},
	{
	  "courseCode": "CSCI0017",
	  "courseName": "Precision Virtual Reality and The Future",
	  "scheduleDays": "T Th",
	  "scheduleTime": "10:30-12:00",
	  "location": "Goldberg 134",
	  "enrollmentMax": 27,
	  "enrollmentCurrent": 13,
	  "enrollmentAvailability": 14,
	  "instructor": "Bo Chang"
	},
	{
	  "courseCode": "CSCI0018",
	  "courseName": "Data Science and Fake News",
	  "scheduleDays": "M W",
	  "scheduleTime": "10:30-12:00",
	  "location": "Goldberg 127",
	  "enrollmentMax": 109,
	  "enrollmentCurrent": 47,
	  "enrollmentAvailability": 62,
	  "instructor": "Juan Ling"
	},
	{
	  "courseCode": "CSCI0019",
	  "courseName": "Internet of Things",
	  "scheduleDays": "M W F",
	  "scheduleTime": "12:30-13:30",
	  "location": "Goldberg 134",
	  "enrollmentMax": 54,
	  "enrollmentCurrent": 24,
	  "enrollmentAvailability": 30,
	  "instructor": "Bo Chang"
	},
	{
	  "courseCode": "CSCI0020",
	  "courseName": "Data Science for Management",
	  "scheduleDays": "M W",
	  "scheduleTime": "13:30-15:00",
	  "location": "Goldberg 143",
	  "enrollmentMax": 53,
	  "enrollmentCurrent": 20,
	  "enrollmentAvailability": 33,
	  "instructor": "Tara K Sharma"
	},
	{
	  "courseCode": "CSCI0021",
	  "courseName": "Innovative Smart Spaces and Sustainability (1)",
	  "scheduleDays": "M W F",
	  "scheduleTime": "12:30-13:30",
	  "location": "Goldberg 134",
	  "enrollmentMax": 64,
	  "enrollmentCurrent": 59,
	  "enrollmentAvailability": 5,
	  "instructor": "Tara Mohan Sharma"
	},
	{
	  "courseCode": "CSCI0022",
	  "courseName": "Innovative Smart Spaces and Sustainability (2)",
	  "scheduleDays": "M W",
	  "scheduleTime": "15:00-16:30",
	  "location": "Online - Synchronous",
	  "enrollmentMax": 128,
	  "enrollmentCurrent": 60,
	  "enrollmentAvailability": 68,
	  "instructor": "Tara Sharma"
	},
	{
	  "courseCode": "CSCI0023",
	  "courseName": "Innovative Smart Spaces and Sustainability (3)",
	  "scheduleDays": "M W",
	  "scheduleTime": "15:00-16:30",
	  "location": "Goldberg 134",
	  "enrollmentMax": 52,
	  "enrollmentCurrent": 40,
	  "enrollmentAvailability": 12,
	  "instructor": "Tarun Kumar"
	},
	{
	  "courseCode": "CSCI0024",
	  "courseName": "Innovative Smart Spaces and Sustainability (4)",
	  "scheduleDays": "M",
	  "scheduleTime": "09:30-12:30",
	  "location": "Online - Synchronous",
	  "enrollmentMax": 68,
	  "enrollmentCurrent": 47,
	  "enrollmentAvailability": 21,
	  "instructor": "Tarun Rajkumar"
	},
	{
	  "courseCode": "CSCI0025",
	  "courseName": "Analytics for Design (1)",
	  "scheduleDays": "M W F",
	  "scheduleTime": "11:30-12:30",
	  "location": "Goldberg 143",
	  "enrollmentMax": 63,
	  "enrollmentCurrent": 54,
	  "enrollmentAvailability": 9,
	  "instructor": "Ravi Patel"
	},
	{
	  "courseCode": "CSCI0026",
	  "courseName": "Analytics for Design (2)",
	  "scheduleDays": "T Th",
	  "scheduleTime": "11:30-13:00",
	  "location": "Goldberg 134",
	  "enrollmentMax": 32,
	  "enrollmentCurrent": 18,
	  "enrollmentAvailability": 14,
	  "instructor": "Ranveer Singh"
	},
	{
	  "courseCode": "CSCI0027",
	  "courseName": "Analytics for Design (3)",
	  "scheduleDays": "T Th",
	  "scheduleTime": "11:30-13:00",
	  "location": "Online - Synchronous",
	  "enrollmentMax": 69,
	  "enrollmentCurrent": 64,
	  "enrollmentAvailability": 5,
	  "instructor": "Ranveer Singh Chandok"
	}
]

jsonDataUni = JSON.stringify(dataUni)

以上是data.js

现在需要创建一个script.js 使得可以在timetable.html 里面能显示出来

样式如图

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

相关推荐