11th week blog
阿新 • • 發佈：2018-11-18
image blog 實踐 response content img sof fun hot
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." ] } ] 效果圖：
11th week blog