<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>WeCome BOOKS</title> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" type="text/css" href="1.js"> </head> <body> <header> </header> <section> </section> <script src="2.js"> </script> </body> </html>
var header = document.querySelector('header'); var section = document.querySelector('section'); var requestURL ='https://gist.githubusercontent.com/HL345/7774958ea5a7dcf1d03f625067e701f5/raw/620cd977a101a3e6b2a6a87b8848a21a4a00feef/2.json'; var request = new XMLHttpRequest();//API接口 request.open('GET', requestURL);//获取URL中的内容 request.responseType = 'json'; request.send(); request.onload = function() { var Book = request.response;//superheroes 变量作用于函数中 populateHeader(Book);//前面无对象所以是函数/将superheros的内容填写到header中 showHeroes(Book);// } function populateHeader(jsonObj) { //自定义populateheader函数 var myH1 = document.createElement('h1');//创建h1元素并将给myH1赋值 myH1.textContent = jsonObj['booksName']; header.appendChild(myH1);//将myh1节点添加到header节点后 } function showHeroes(jsonObj) { var book = jsonObj['members']; for (var i = 0; i < book.length; i++) { var myArticle = document.createElement('article'); var myH2 = document.createElement('h2'); var myH3=document.createElement('h3'); var myList = document.createElement('ul'); myH2.textContent = book[i].name; myH3.textContent=book[i].type; myArticle.appendChild(myH2); myArticle.appendChild(myH3); section.appendChild(myArticle); } }
/* || general styles */ html { font-family: 'helvetica neue', helvetica, arial, sans-serif; } body { width: 800px; margin: 0 auto; } h1, h2 { font-family: 'Faster One', cursive; } /* header styles */ h1 { font-size: 4rem; text-align: center; } header p { font-size: 1.3rem; font-weight: bold; text-align: center; } /* section styles */ section article { width: 33%; float: left; } section p { margin: 5px 0; } section ul { margin-top: 0; } h2 { font-size: 2.5rem; letter-spacing: -5px; margin-bottom: 10px; }
