Java script＜＜ 渲染数据

Java script＜＜ 渲染数据

渲染数据

                

     

html内容

        * {
            margin: 0;
            padding: 0;
        }

        button {
            display: block;
            margin: 0 auto;
        }

        .list{
            width: 99%;
            height: 100%;
            margin: 0 auto;
            padding-bottom: 2rem;
            list-style: none;
            justify-content: space-around;
            display: flex;
            flex-wrap: wrap;
        }

        .list>li{
            height: 27rem;
            display: flex;
            flex-direction: column;
            border: 1px solid rgb(245, 244, 244);
            margin-bottom: 2rem;
            transition: all 0.7s;
        }

        .list>li:hover{
            border: 1px solid rgb(168,213,3);
        }

        .list div{
            width: 20rem;
            vertical-align: top;
            overflow: hidden;
        }

        .list div>img{
            width: 100%;
            transition: all 0.8s;
        }

        .list div>img:hover{
            transform: scale(1.2);
        }

        .list>li>p{
            font-size: 1.4rem;
            color: rgb(63, 63, 63);
            margin: 1rem 0 4rem 1rem;
        }

        .list>li>p:hover{
            text-decoration: underline;
            color: rgb(168,213,3);
            }
    

css样式

 function showData() {
        var ajax = new XMLHttpRequest() || new ActiveXObject('Microsoft XMLHTTP');
        ajax.open('get', './doT.json');
        ajax.send();
        ajax.onreadystatechange = function () {
            if (ajax.readyState == 4) {
                if (ajax.status == 200) {
                    var data = JSON.parse(ajax.responseText);
                    show(data.list);
                }
            }
        }
    }

    function show(list) {
        var str = '';
        for (var i of list) {
            str += '
';
            str += '
' + i.imgtitle + '
';
            str += '';
            str += '' + i.note + '';
            str += '
';

        }
        var ul = document.getElementsByClassName('list')[0];
        ul.innerHTML = str;
    }

js代码

注意：get 的 json 文件路径需要修改

{
    "list": [{
        "imgurl": "http://127.0.0.1:5500/img/l1.jpg",
        "note": "青心乌龙"
      },
      {
        "imgurl": "http://127.0.0.1:5500/img/l2.jpg",
        "note": "冻顶乌龙"
      }
    ]
  }

JSON数据