JSON实践
html代码：
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8"> 6 7 <title>Photos Show</title> 8 9 <link href="https://www.fontsquirrel.com/css?family=Quicksand-Bold.otf" rel="stylesheet"> 10 <link rel="stylesheet" href="style.css"> 11 </head> 12 13 <body> 14 15 <header> 16 17 </header> 18 19 <img src="images/1.photo.jpg" width=300 height=150> 20 <img src="images/2.photo.jpg" width=300 height=150> 21 <img src="images/3.photo.jpg" width=300 height=150> 22 23 <section> 24 25 </section> 26 27 <script src="js-script/main.js"> 28 </script> 29 </body> 30 31 </html>
css代码：
html { font-family: 'AlexBrush-Regular.ttf', helvetica, arial, sans-serif; } body { width: 1000px; margin: 0 auto; background: pink } h1, h2 { font-family: 'Quicksand-Bold.otf', cursive; } /* header styles */ h1 { font-size: 4rem; text-align: center; color: red } header p { font-size: 5rem; font-weight: bold; text-align: center; } /* section styles */ section article { width: 30%; float: left; } section p { margin: 5px 0; } h2 { font-size: 2.5rem; letter-spacing: -5px; margin-bottom: 60px; }
JS代码：
var header = document.querySelector('header'); var section = document.querySelector('section'); var requestURL = 'https://raw.githubusercontent.com/Bayleee/js/master/photo.json'; var request = new XMLHttpRequest(); request.open('GET', requestURL); request.responseType = 'json'; request.send(); request.onload = function() { var photo = request.response; populateHeader(photo); showPhoto(photo); } function populateHeader(jsonObj) { var myH1 = document.createElement('h1'); myH1.textContent = jsonObj['squadName']; header.appendChild(myH1); } function showPhoto(jsonObj) { var photo = jsonObj['members']; for (i = 0; i < photo.length; i++) { var myArticle = document.createElement('article'); var myH2 = document.createElement('h2'); var myPara1 = document.createElement('p'); var myPara2 = document.createElement('p'); var myPara3 = document.createElement('p'); var myList = document.createElement('ul'); myH2.textContent = photo[i].name; myPara1.textContent = 'author: ' + photo[i].author; myPara2.textContent = 'time: ' + photo[i].time; myPara3.textContent = 'explanation:' + photo[i].explanation; myArticle.appendChild(myH2); myArticle.appendChild(myPara1); myArticle.appendChild(myPara2); myArticle.appendChild(myPara3); myArticle.appendChild(myList); section.appendChild(myArticle); } }
JSON代码：
{
"squadName": "Photos Show",
"active": true,
"members": [{
"name": "海浪绽放",
"author": "栖霞仙客",
"time": "Summer",
"explanation": [
"I like the sea, and I love the wonderful moments when the waves hit the rocks."
]
},
{
"name": "河坊街夜市",
"author": "江南人家",
"time": "Autumn",
"explanation": [
"The simplicity of the people fascinated me."
]
},
{
"name": "人间仙境",
"author": "时间流逝",
"time": "Spring",
"explanation": [
"The beauty of the world is numerous."
]
}
]
效果图：
