微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

js 数据渲染

<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width,initial-scale=1.0">
<Meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{margin: 0;padding: 0;}
section{
width: 1300px;
margin: 0 auto;
background: pink;
overflow: hidden;
}
div{
width: 300px;
height: 400px;
float: left;
border: 2px solid #000;
margin: 10px;
}
a{width: 300px;height: 300px;display: block;}
a img{width: 100%;height: 100%;display: block;}
h2{color: #f00;text-align: center;}
p{font-size: 14px;line-height: 20px;}
</style>
</head>
<body>
<section id="Box"</section>
 
 
<script>
var arr = [
{
id : 01,
price : 1000,
imgSrc : "http://img13.360buyimg.com/n7/jfs/t1/26123/4/9617/119461/5c8082e6Eb533f3fc/f53c4b1b39676fa9.jpg",
title : "【特步正品官方】满199立减10,满299立减20,满399立减30,火爆开启,点击查看热卖尖货!"
},
{
id : 02,
price : 2000,
imgSrc : "http://img10.360buyimg.com/n7/jfs/t1/58638/8/6570/143338/5d4658d3Eeb186fc7/c979efb1c3cdc95a.jpg",
title : "范华尼 短袖t恤男2019夏季新款潮流修身半袖体恤男士休闲上衣打底衫POLO衫男 深灰 XL!"
},
{
id : 03,
price : 3000,
imgSrc : "http://img10.360buyimg.com/n7/jfs/t1/41293/26/9137/126467/5d29665fEad149728/f5cb00de507f609f.jpg",
title : "范华尼 短袖t恤男2019夏季新款潮流修身9立减20,满399立减30,火爆开启,点击查看热卖尖货!"
},
{
id : 01,
 
{
id : 04,
price : 4000,
imgSrc : "http://img11.360buyimg.com/n7/jfs/t1/69679/40/5140/126743/5d32f0f5E7f69253a/37c4dcd5bb5ea2a2.jpg",
title : "【特步正品官方】热卖尖货!"
}
];
var str = "";
for(var i = 0,k = arr.length; i < k; i++){
str += ‘<div><a href="#"><img src=‘ + arr[i].imgSrc + " alt=‘‘></a><h2>" + arr[i].price + "</h2><p>" + arr[i].title + "</p></div>";
}
console.log(str);
Box.innerHTML = str;


 
 
</script>
</body>
</html>

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐