11th week blog

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."
            ]
        }
    ]
 
 效果图：

相关阅读:
电商平台开发笔记5.nuxt项目中深度选择器解决el-input高度设置无效
 电商平台开发笔记4.css选择器之~波浪号使用
 电商平台开发笔记3.nuxt全局css的引入
 电商平台开发笔记2.Nuxt增加对less支持，解决This relative module was not found报错
 电商平台开发笔记1.Nuxt项目创建+Eslint代码保存自动格式化
 vue-cli 4.x 发布前的一些优化
 VueCli 4.x npm run build后主页空白的原因及解决方案
 VSCode 保存时自动ESlint格式化
 git 常用操作笔记
 VSCode下手动构建webpack项目
原文地址：https://www.cnblogs.com/hayaasyh/p/9978595.html