Java script＜＜渲染数据

最新推荐文章于 2022-10-15 19:41:30 发布

littleNicki

最新推荐文章于 2022-10-15 19:41:30 发布

阅读量492

点赞数 1

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/Wildness_/article/details/121387390

版权

<button onclick="showData()">渲染数据</button>
<ul class="list">
                
</ul>

html内容

<style>
        * {
            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);
            }
    </style>

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 += '<li>';
            str += '<p>' + i.imgtitle + '</p>';
            str += '<img src="' + i.imgurl + '">';
            str += '<div>' + i.note + '</div>';
            str += '</li>';

        }
        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数据