web前端如何将js数据在页面展示

最新推荐文章于 2024-03-26 22:50:29 发布

飞花非雪绯人间

最新推荐文章于 2024-03-26 22:50:29 发布

阅读量7k

点赞数 5

分类专栏： css 数据引入页面文章标签： web json数据

本文链接：https://blog.csdn.net/weixin_45420201/article/details/100053824

版权

css 同时被 2 个专栏收录

1 篇文章 1 订阅

订阅专栏

数据引入页面

1 篇文章 0 订阅

订阅专栏

web前端如何将js数据在页面展示

在获取到json数据后,在html中用script引入json数据,并进行页面布局:

可以先进行html的初步页面布局,在使用json数据中的一个对其进行css 样式设置,设置好后删除,最后在script引入json数据,这样的话引入的数据就会样式一致,减少了在script中设置样式的麻烦.

例子:

json数据中的一个

"ablum": "我们不一样",
	"artist": "大壮",
	"id": 23,
	"name": "大壮 - 我们不一样",
	"path": "musics/8/1551273973067.mp3",
	"size": 10935843,
	"style": "流行",
	"uid": 8,
	"uploadtime": 1551273973000

html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<!-- 引入页面布局的css -->
		<link rel="stylesheet" href="css/exp2.css">
		<!-- 引入字体样式 -->
		<link rel="stylesheet" type="text/css" href="asserts/font-awesome-4.7.0/css/font-awesome.min.css" />
	</head>
	<body>

		<div class="header">
			<div class="header-img"><img class="img1" src="img/logo1.bmp" alt=""></div>
			<div class="a-type"><a class="a1" href="">发现</a></div>
			<div class="a-type"><a class="a1" href="">我的音乐</a></div>
			<div class="a-type"><a class="a1" href="">音乐人</a></div>
			<div class="a-type"><a class="a1" href="">客户端下载</a></div>
			<div class="a-type"><a class="a1" href="">会员中心</a></div>

			<div class="input"><input type="text" placeholder="搜索"><i class="fa fa-search"></i></div>
			<div class="btn"><button type="button">登录/注册</button></div>
		</div>
		<div class="main">
			<div class="left">
				<div class="left-img"><img class="img2" src="img/10.jpg" alt=""></div>
			</div>
			<div class="right">
				<div class="item">
					<div class="item-id">12</div>
					<div class="item-img"><img class="img3" src="img/1.jpg"></div>
					<div class="item-name">小苹果</div>
					<div class="item-artist">筷子兄弟</div>
					<div class="item-style">流行</div>
					<div class="item-size">3.4MB</div>
				</div>
			</div>
		</div>
		<div class="footer">
			<div class="btn2"><button class="btn2-type" type="button">播放</button></div>
		</div>
       <!--引入json数据  -->
		<script src="js/list.js"></script>
		<script>
			var html = '';
			for (var i = 0; i < musics.length; i++) {
				//获取一首歌曲
				var m = musics[i];

				html += '<div class="item">';
				html += '<div class="item-id">' + m.id + '</div>';
				html += '<div class="item-img"><img class="img3" src="img/1.jpg"></div>';
				html += '<div class="item-name">' + m.name + '</div>';
				html += '<div class="item-artist">' + m.artist + '</div>';
				html += '<div class="item-style">' + m.style + '</div>';
				html += '<div class="item-size">' + fmtsize(m.size) + '</div>';
				html += '</div>';
			}
			document.querySelector('.right').innerHTML = html;

			function fmtsize(size) {
				size = size / (1024 * 1024);
				size = size.toFixed(1);
				return size + 'MB';
			}
		</script>
	</body>
</html>

css

/* 界面整体框架结构 */

*{
	margin: 0;
	padding: 0;
	
}
body {
	
	width: 1350px;
	height: 635px;

}

div {
	box-sizing: border-box;
}

.header,
.footer{
	position: relative;
	width: 100%;
	height:70px;
}

.main{
	position: relative;
	width: 100%;
	height:495px;
}
.header{
	list-style: none;
}
.footer{
	bottom: 0;
}

.left,
.right{
	position: absolute;
	float: left;
	height:495px;
}
.left {
	left: 0;
    width: 25%;
}

.right {
	
	left: 25%;
	right: 5%;
	width: 70%;
	overflow-y: scroll;
}

/* 头部样式*/
.header-img{
	position: relative;
	float: left;
	width: 200px;
}

.img1{
	position: relative;
	float: right;
	top: 10px;
	width: 120px;
	height: 50px;
}
.a-type{
	float: left;
	width: 90px;
	height: 70px;
	text-align: center;
	line-height: 70px;
}
.a1{
	display: block;
	text-decoration: none;
	color: #222222;
}
.a1:hover{
	color:#0000FF;
}
.input{
	position: absolute;
	right: 150px;
	width:170px;
	height: 70px;
	text-align: center;
	line-height: 70px;
}
.btn{
	position: absolute;
	right: 50px;
	width: 90px;
	height: 70px;
	text-align: center;
	line-height: 70px;
	
}
/* 左侧样式 */
.left-img{
	position: relative;
	top: 80px;
	left: 100px;
	height: 180px;
	width: 180px;
	
}
.img2{
	height: 180px;
	width: 180px;
}
/* 右侧样式 */
.item{
	display: flex;
	height: 50px;
	line-height: 50px;
	color: #556766;	
}

.item:nth-child(2n+1){
	background-color: #ddd;
}
/* .item:nth-child(2n){
	background-color: #bbb;
} */

.item:hover{
	background: #2980B9;
}
.item-id{
	flex: 1;
}
.item-img{
	flex: 1;
		margin: 5px auto;
}
.img3{
	width: 40px;
	height: 40px;
}
.item-name{
	flex: 4;
	padding-left: 10px;
}
.item-artist{
	flex: 2;
	padding-left: 10px;
}
.item-style{
	flex: 3;
	padding-left: 10px;
}

.item-size{
	flex: 1;
} 
/* 底部样式 */
.btn2{
	position: relative;
	left: 50%;
	margin: 0 0 0 -100px;
	height: 100%;
	width: 200px;
}
.btn2-type{
	position: relative;
	left: 30px;
	height: 70px;
	width: 140px;
	font-size: 18px;
	text-align: center;
	line-height: 70px;
	color: #eee;
	background: rgba(176,54,255,0.5);
	
	
}
.btn2-type:hover{
	background: #3498db;
}

飞花非雪绯人间

关注

5
点赞
踩
17

收藏

觉得还不错? 一键收藏
1
评论
web前端如何将js数据在页面展示

web前端如何将js数据在页面展示在获取到json数据后,在html中用script引入json数据,并进行页面布局: 可以先进行html的初步页面布局,在使用json数据中的一个对其进行css 样式设置,设置好后删除,最后在script引入json数据,这样的话引入的数据就会样式一致,减少了在script中设置样式的麻烦.例子:json数据中的一个"ablum": ...
复制链接

扫一扫