DOM 案例——新浪微博数据操作

最新推荐文章于 2024-08-22 14:32:34 发布

爱喝牛奶~

最新推荐文章于 2024-08-22 14:32:34 发布

阅读量389

点赞数 4

本文链接：https://blog.csdn.net/qq_52301431/article/details/125817125

版权

新浪微博模拟数据真实数据 JavaScript 社交媒体

关键词由CSDN通过智能技术生成

1、新浪微博假数据

2、新浪微博真数据

1、新浪微博假数据

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
	<style>
		#mainbox {
			width: 970px;
			margin: 10px auto;
		}
	</style>
	<div id="mainbox">
	</div>
	<script>
		var mysina = {
			a: 20,
			b: "20条新浪微博",
			arr: [{
					id: 12345,
					text: "微博内容1微博内容1微博内容1微博内容1微博内容1微博内容1微博内容1微博内容1微博内容1微博内容1微博内容1微博内容1",
					comments_count: 20,
					att_count: 80,
					report: 13,
					imgs: ["./src/2.jpg", "./src/3.jpg", "./src/4.jpg"]
				},
				{
					id: 12346,
					text: "山东高法第三帝国电饭锅山东高法第三帝国电饭锅山东高法第三帝国电饭锅山东高法第三帝国电饭锅山东高法第三帝国电饭锅山东高法第三帝国电饭锅山东高法第三帝国电饭锅山东高法第三帝国电饭锅山东高法第三帝国电饭锅",
					comments_count: 250,
					att_count: 820,
					report: 1323,
					imgs: ["./src/5.jpg", "./src/6.jpg", "./src/7.jpg", "./src/8.jpg", "./src/9.jpg", "./src/10.jpg"]
				}
			]
		}
		console.log(mysina)
		//1.创建一个放新闻的大盒子,把它添加到mainbox中
		for (var i = 0; i < mysina.arr.length; i++) {
			var box1=document.createElement("div")
			mainbox.appendChild(box1)
			// 添加类名
			box1.className="box1"
			//2.创建一个放标题的盒子 添加到新闻大盒子
			var title=document.createElement("div")
			box1.appendChild(title)
			// 添加文本innerHTML,是mysina中的数据
			title.innerHTML=mysina.arr[i].text
			//添加类名,让它排版排在新闻大盒子的上面
			title.classList.add("title")
			//3.创建一个放图片的盒子box2 添加到新闻大盒子			
			//添加类名,让它排版排在新闻大盒子的中间,写弹性布局让它内部的图片排版整齐
			var imgbox=document.createElement("div")
			imgbox.className="imgbox"
			box1.appendChild(imgbox)
			//4.
			//根据图片数据的个数创建对应个数的图片标签 
			// 把图片全部添加到box2中
			//给图片加类名
			// 给图片加src
			mysina.arr[i].imgs.forEach((el)=>{
				var img1=document.createElement("img")
				img1.classList.add("img1")
				img1.src=el
				imgbox.appendChild(img1)
			})
		}
		//5.底部条
	</script>
</body>
</html>

2、新浪微博真数据

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="referrer" content="no-referrer" />
    <title></title>
    <script src="sina.js"></script>
</head>
<body>
    <style>
        .mainbox {
            width: 970px;
            /* height: 40px; */
            margin: 10px auto;
            background-color: white;
        }
        .sinabox {
            width: 100%;
            background-color: rgb(119, 208, 139);
        }
        .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 {
            padding: 20px;
            /* width: calc(100%-40px); */
        }
        .pics {
            display: flex;
            justify-content: flex-start;
            flex-wrap: wrap;
            margin-left: 110px;
        }
        .img1 {
            width: 250px;
            margin: 5px;
        }
        .bottombar {
            display: flex;
            justify-content: space-around;
        }
    </style>
    <div class="mainbox"></div>
    <script>
        function tool(time) {
            var sinadt = new Date(time)
            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 = new Date(absdt).getMinutes()
                return `${m}分钟前`
            } else {
                let mo = sinadt.getMonth() + 1
                let day = sinadt.getDate()
                let h = sinadt.getHours()
                let s = sinadt.getMinutes()
                return `${mo}-${day} ${h}:${s}`
            }
        }
    </script>
    <script>
        console.log(data)
        data.statuses.forEach((el) => {
            //创建一个新浪微博的大盒子添加到mainbox
            var sinabox = document.createElement("div")
            var mainbox = document.querySelector(".mainbox")
            mainbox.appendChild(sinabox)
            sinabox.classList.add("sinabox")
            sinabox.innerHTML = "<hr>"
            //顶部的用户信息bar
            var sinatopbar = document.createElement("div")
            sinabox.appendChild(sinatopbar)
            sinatopbar.className = "sinatopbar"
            //头像
            var touxiang = document.createElement("img")
            sinatopbar.appendChild(touxiang)
            touxiang.src = el.user.profile_image_url
            touxiang.className = "touxiang"
            //昵称和时间
            var infolabel = document.createElement("div")
            sinatopbar.appendChild(infolabel)
            infolabel.className = "infolabel"
            //下面代码和下面的一样
            infolabel.innerHTML = `<div>${el.user.name}</div>
            <div>${tool(el.created_at)}</div>`
            // var name1=document.createElement("div")
            // infolabel.appendChild(name1)
            // name1.innerHTML=el.user.name
            // var time=document.createElement("div")
            // infolabel.appendChild(time)
            // time.innerHTML=tool(el.created_at)
            //微博配文
            var text = document.createElement("div")
            text.className = "text"
            text.innerHTML = el.text
            sinabox.appendChild(text)
            //微博配图
            var pics = document.createElement("div")
            sinabox.appendChild(pics)
            pics.className = "pics"
            for (let j = 0; j < el.pic_urls.length; j++) {
                var img1 = document.createElement("img")
                img1.className = "img1"
                img1.src = el.pic_urls[j].thumbnail_pic
                pics.appendChild(img1)
            }
            //底部工具条
            var bottombar = document.createElement("div")
            sinabox.appendChild(bottombar)
            bottombar.className = "bottombar"
            var dianzan = document.createElement("div")
            bottombar.appendChild(dianzan)
            dianzan.innerHTML = '点赞' + el.attitudes_count
            var zhuanfa = document.createElement("div")
            bottombar.appendChild(zhuanfa)
            zhuanfa.innerHTML = '转发' + el.comments_count
            var pinglun = document.createElement("div")
            bottombar.appendChild(pinglun)
            pinglun.innerHTML = '评论' + el.reposts_count
        })
    </script>
</body>
</html>