DOM：JSON数据导入并在网页显示

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
</head>

<body>
    <style>
        body {

            margin: 0px;
            background-color: darkgray;

        }

        .mainbox {
            width: 970px;
            margin: 5px auto;
            position: relative;
            background-color: ghostwhite;
        }

        .sinabox {
            width: 970px;
            background-color: white;
            border-radius: 10px;
        }

        .sinatopbar {
            width: 100%;
            height: 60px;
            display: flex;
            justify-content: flex-start;
            flex-wrap: nowrap;
        }

        .touxiang {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            margin-left: 20px;
        }

        .text {
            width: calc(100%-40px);
            padding: 20px;
            font-size: 14px;
            color: gray;
            background-color: rgb(244, 244, 244)
        }

        .pics {
            width: 637px;
            margin-left: 141px;
            display: flex;
            justify-content: flex-start;
            flex-wrap: wrap;
            background-color: rgb(244, 244, 244)        }

        .img1 {
            width: 201px;
            margin: 5px;
        }

        .bottombar{
            width: 100%;
            height: 40px;
            display: flex;
            justify-content: space-around;
            flex-wrap: nowrap;
            background-color: #fff;
        }
    </style>
    <div class="mainbox"></div>

    <script src="../解压文件/sina.js"></script>
    <script>
        function timerformat1(timerstr) {
            var sinadt = new Date(timerstr)
            var nowdt = new Date()
            var absdt = nowdt - sinadt//毫秒单位的数字
            if (0 <= absdt && absdt < 1000 * 60) {
                return "刚刚"
            } else if (1000 * 60 <= absdt && absdt < 1000 * 60 * 60) {
                // let  m=parseInt(absdt/(1000*60))
                let m = new Date(absdt).getMinutes()
                return `${m}分钟前`
            } else {
                let mo = sinadt.getMonth() + 1
                let day = sinadt.getDate()
                let m = sinadt.getHours()
                let s = sinadt.getMinutes()
                return `${mo}-${day} ${m}:${s}`
            }
        }
    </script>
    <script>

        //查看数据结构
        console.log(sinadata);

        //创建一个新浪微博的大盒子添加到mainbox

        //获取大盒子
        var mainbox = document.querySelector('.mainbox');
        sinadata.statuses.map((el) => { tool(el) })

        function tool(el) {

            //创建一个盒子放新浪数据
            var sinabox = document.createElement('div');
            //把新浪数据盒子放入大盒子中
            mainbox.appendChild(sinabox);
            //为放新浪数据的盒子创建类名为sinabox
            sinabox.classList.add('sinabox');

            //顶部的用户信息bar
            var sinatopbar = document.createElement('div')
            sinabox.appendChild(sinatopbar)
            sinatopbar.classList.add('sinatopbar')

            //头像
            var touxiang = document.createElement('img')
            sinatopbar.appendChild(touxiang)
            touxiang.classList.add('touxiang')
            touxiang.src = el.user.profile_image_url

            //昵称和时间
            var infolabel = document.createElement('div')
            sinatopbar.appendChild(infolabel)
            infolabel.classList.add('infolabel')
            infolabel.innerHTML = `<div>${el.user.name}</div><div>${timerformat1(el.user.created_at)}</div>`

            //微博配文
            var text = document.createElement('div')
            sinabox.appendChild(text)
            text.classList.add('text')
            text.innerHTML = el.text

            //微博配图
            //配图的盒子
            var pics = document.createElement('div')
            pics.classList.add('pics')
            sinabox.appendChild(pics)
            //获取每个图片
            for (let i = 0; i < el.pic_urls.length; i++) {
                var img1 = document.createElement('img')
                img1.classList.add('img1')
                img1.src = el.pic_urls[i].thumbnail_pic;
                pics.appendChild(img1)
            }

            //底部工具条
            var bottombar = document.createElement('div')
            sinabox.appendChild(bottombar)
            bottombar.classList.add('bottombar')
            bottombar.innerHTML = `<div>点赞${el.attitudes_count}</div><div>转发${el.comments_count}</div><div>评论${el.reposts_count}</div>`

        }
    </script>

</body>

</html>
posted on 2022-07-16 16:03 香香鲲阅读(188) 评论(0) 收藏举报