<!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;
}
body > div {
width: 1200px;
margin: 0 auto;
background-color: skyblue;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
height: 100px;
font-size: 60px;
}
ul, li {
list-style: none;
}
ul {
width: 1200px;
margin: 10px auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
li {
width: 295px;
border: 1px solid #333;
height: 510px;
margin-bottom: 10px;
box-sizing: border-box;
padding: 8px;
}
img {
width: 280px;
height: 350px;
display: block;
}
.info {
display: flex;
flex-direction: column;
justify-content: space-between;
box-sizing: border-box;
}
</style>
</head>
<body>
a
<div class="header">网页头部</div>
<ul>
<li>
<img src="" alt="">
<div class="info">
<p>名称</p>
<p>城市: 城市</p>
<p>地址: 地址</p>
<p>价格: 价格</p>
<p>演出时间: 时间</p>
</div>
</li>
</ul>
<div class="footer">网页底部</div>
<script src="./dm_list.js"></script>
<script>
console.log(list)
// 1. 获取元素
var listBox = document.querySelector('ul')
// 2. 准备空字符串, 循环遍历组装完整字符串
// 可以使用 reduce
// var str = ''
// list.forEach(function (item) {
// str += `
// <li>
// <img src="${ item.pic }" alt="">
// <div class="info">
// <p>${ item.name }</p>
// <p>地址: ${ item.address }</p>
// <p>城市: ${ item.city }</p>
// <p>价格: ${ item.price }</p>
// <p>演出时间: ${ item.showTime }</p>
// </div>
// </li>
// `
// })
// 3. 把组装好的 str 插入到 ul 标签中
// listBox.innerHTML = str
// 直接利用 reduce 出现效果
listBox.innerHTML = list.reduce(function (prev, item) {
return prev += `
<li>
<img src="${ item.pic }" alt="">
<div class="info">
<p>${ item.name }</p>
<p>地址: ${ item.address }</p>
<p>城市: ${ item.city }</p>
<p>价格: ${ item.price }</p>
<p>演出时间: ${ item.showTime }</p>
</div>
</li>
`
}, '')
</script>
</body>
</html>
js
var list = [{"id":625153951363,"name":"2020西太湖国际音乐节","showTime":"2020.09.19-09.20","price":"199-399","city":"常州","address":"常州西太湖中国花卉博览景区北门","pic":"https://img.alicdn.com/bao/uploaded/https://img.alicdn.com/imgextra/i3/2251059038/O1CN01zJEpaN2GdSG1Xvo8y_!!2251059038.jpg"},{"id":624506842658,"name":"2020舟山东海音乐节","showTime":"2020.09.04-09.06","price":"200-680","city":"舟山","address":"舟山市朱家尖南沙景区沙滩","pic":"https://img.alicdn.com/bao/uploaded/i4/2251059038/O1CN01L70FVl2GdSG2wpwyE_!!0-item_pic.jpg"},{"id":623216520608,"name":"中国•磐安 2020氧气山水音乐节","showTime":"2020.08.22 周六 16:30","price":"280","city":"金华","address":"金华磐安花溪风景区","pic":"https://img.alicdn.com/bao/uploaded/https://img.alicdn.com/imgextra/i3/2251059038/O1CN01ECp69h2GdSFpoUPAm_!!2251059038.jpg"},{"id":624345993344,"name":"2020“一生中最爱”七夕演唱会","showTime":"2020.08.25 周二 19:30","price":"180-580","city":"北京","address":"糖果TANGO-雍和宫店三层","pic":"https://img.alicdn.com/bao/uploaded/i3/2251059038/O1CN01WGNYBE2GdSFqXJgII_!!0-item_pic.jpg"},{"id":624170605605,"name":"东海五渔节之敢潮音乐节","showTime":"2020.08.22 周六 18:00","price":"198-228","city":"舟山","address":"舟山嵊泗五龙乡听海广场(原黄沙村船厂)","pic":"https://img.alicdn.com/bao/uploaded/https://img.alicdn.com/imgextra/i1/2251059038/O1CN01eV5pR32GdSFxJUb0v_!!2251059038.jpg"},{"id":624000957041,"name":"【聚光灯】周四周日爆笑脱口秀剧场","showTime":"2020.08.13-09.27","price":"99","city":"上海","address":"健力士醇黑坊","pic":"https://img.alicdn.com/bao/uploaded/i3/2251059038/O1CN01s9Jlz32GdSFv79hIO_!!0-item_pic.jpg"},{"id":623838540974,"name":"2020真世界摇滚演出","showTime":"2020.08.29 周六 20:30","price":"120","city":"北京","address":"糖果TANGO-雍和宫店三层","pic":"https://img.alicdn.com/bao/uploaded/i2/2251059038/O1CN01HWbQXk2GdSFxARpRD_!!0-item_pic.jpg"},{"id":624699066028,"name":"开心麻花首部悬疑惊悚喜剧《醉后赢家》","showTime":"2020.08.25-09.06","price":"80-1080","city":"北京","address":"地质礼堂剧场","pic":"https://img.alicdn.com/bao/uploaded/https://img.alicdn.com/imgextra/i2/2251059038/O1CN01Vv1mQO2GdSFvnmIDs_!!2251059038.png"},{"id":625219995330,"name":"开心麻花经典爆笑舞台剧《乌龙山伯爵》","showTime":"2020.08.25-08.30","price":"80-1080","city":"北京","address":"北京展览馆剧场","pic":"https://img.alicdn.com/bao/uploaded/i3/2251059038/O1CN01znXuKj2GdSG6ACMMb_!!0-item_pic.jpg"},{"id":623454281510,"name":"开心麻花重磅新戏《贼想得到你》","showTime":"2020.08.12 周三","price":"80-1280","city":"上海","address":"上汽上海文化广场","pic":"https://img.alicdn.com/bao/uploaded/i1/2251059038/O1CN013YAyeY2GdSFnXwgnQ_!!0-item_pic.jpg"},{"id":625314963280,"name":"开心麻花重磅新戏《贼想得到你》","showTime":"2020.08.15-08.21","price":"100-1180","city":"上海","address":"虹桥艺术中心","pic":"https://img.alicdn.com/bao/uploaded/i3/2251059038/O1CN01Qb8wyX2GdSG30DCl4_!!0-item_pic.jpg"},{"id":622815888793,"name":"开心麻花上海首部原创爆笑舞台剧《皇帝的新娘》","showTime":"2020.08.12-08.16","price":"80-1180","city":"上海","address":"上戏实验剧院","pic":"https://img.alicdn.com/bao/uploaded/i2/2251059038/O1CN01uie4Gf2GdSFlp1Rvv_!!0-item_pic.jpg"},{"id":624443634831,"name":"孟京辉戏剧作品《我爱xxx》","showTime":"2020.08.13-08.16","price":"100-380","city":"北京","address":"蜂巢剧场","pic":"https://img.alicdn.com/bao/uploaded/https://img.alicdn.com/imgextra/i3/2251059038/O1CN01LwdJRL2GdSFtDPtRL_!!2251059038.jpg"},{"id":624095704875,"name":"【8月8日-16日场次周年特惠低至四折】太阳马戏X绮幻之境 - 8月","showTime":"2020.08.12-08.30","price":"360-3460","city":"杭州","address":"杭州新天地太阳剧场","pic":"https://img.alicdn.com/bao/uploaded/i3/2251059038/O1CN01iyWOwU2GdSG2iMBsM_!!0-item_pic.jpg"},{"id":624163106935,"name":"高达5公里定向挑战赛","showTime":"2020.09.26 周六","price":"108-388","city":"上海","address":"世纪公园","pic":"https://img.alicdn.com/bao/uploaded/https://img.alicdn.com/imgextra/i3/2251059038/O1CN01y2n1PI2GdSFtLmEtu_!!2251059038.jpg"},{"id":622064265074,"name":"2020 FORMULA1 中国大奖赛(礼包&福袋)","showTime":"2020.07.04-12.31","price":"120-270","city":"上海","address":"上汽国际赛车场(上海国际赛车场)","pic":"https://img.alicdn.com/bao/uploaded/https://img.alicdn.com/imgextra/i2/2251059038/O1CN01ZHrnGM2GdSFbZjdUV_!!2251059038.jpg"},{"id":623662985515,"name":"2020ChinaJoy电竞赛事荟萃","showTime":"2020.07.31-10.30","price":"0","city":"北京","address":"请到大麦APP和优酷APP观看","pic":"https://img.alicdn.com/bao/uploaded/i4/2251059038/O1CN01RpgBQ82GdSFoMD7h8_!!0-item_pic.jpg"},{"id":618307700815,"name":"2020 FORMULA1 中国大奖赛(服装)","showTime":"2020.05.19-12.31","price":"248-620","city":"上海","address":"上汽国际赛车场(上海国际赛车场)","pic":"https://img.alicdn.com/bao/uploaded/i2/2251059038/O1CN01scI6Ly2GdSFEYDh7P_!!0-item_pic.jpg"},{"id":613334933912,"name":"2020 FORMULA1 中国大奖赛(周边衍生品)","showTime":"2020.03.11-12.31","price":"35-160","city":"上海","address":"上汽国际赛车场(上海国际赛车场)","pic":"https://img.alicdn.com/bao/uploaded/https://img.alicdn.com/imgextra/i3/2251059038/O1CN01ZusbUY2GdSENL0iIN_!!2251059038.jpg"},{"id":613323173822,"name":"2020 FORMULA1 中国大奖赛(帽品)","showTime":"2020.03.11-12.31","price":"200-335","city":"上海","address":"上汽国际赛车场(上海国际赛车场)","pic":"https://img.alicdn.com/bao/uploaded/https://img.alicdn.com/imgextra/i3/2251059038/O1CN01azreXu2GdSF9rIkGV_!!2251059038.jpg"},{"id":613940057617,"name":"加速北京跳伞俱乐部高空跳伞体验","showTime":"2020.08.05-08.31","price":"2980","city":"北京","address":"北京市平谷区马坊镇通航产业基地","pic":"https://img.alicdn.com/bao/uploaded/https://img.alicdn.com/imgextra/i1/2251059038/O1CN01Ns9MZj2GdSFIp2udB_!!2251059038.png"},{"id":624453755826,"name":"《你是演奏家2 · 超级金贝鼓》","showTime":"2020.08.21-08.23","price":"180-380","city":"上海","address":"美琪大戏院","pic":"https://img.alicdn.com/bao/uploaded/i4/2251059038/O1CN016u70M62GdSFrTL5GP_!!0-item_pic.jpg"},{"id":624211844323,"name":"正版授权·大型儿童实景舞台剧《奥特曼宇宙之光》","showTime":"2020.09.05 周六","price":"180-580","city":"海口","address":"海南省歌舞剧院","pic":"https://img.alicdn.com/bao/uploaded/https://img.alicdn.com/imgextra/i2/2251059038/O1CN01ybwkiZ2GdSFy9894v_!!2251059038.jpg"},{"id":624672730925,"name":"全国正版授权大型互动式儿童舞台剧 海底小纵队2—火山大冒险","showTime":"2020.11.15 周日","price":"80-480","city":"上海","address":"黄浦剧场-中剧场","pic":"https://img.alicdn.com/bao/uploaded/i1/2251059038/O1CN01mfDv5t2GdSFwbhzvt_!!0-item_pic.jpg"},{"id":624868314578,"name":"大船文化·加拿大原版音乐启蒙全场互动亲子剧《你是演奏家2·超级金贝鼓》","showTime":"2020.09.06 周日","price":"180-380","city":"天津","address":"津湾大剧院大剧场","pic":"https://img.alicdn.com/bao/uploaded/https://img.alicdn.com/imgextra/i4/2251059038/O1CN01l16ZUE2GdSFzGWSPx_!!2251059038.png"},{"id":624450522367,"name":"大船文化·法国艺术启蒙魔术剧《美术馆奇妙夜·星夜》中文版","showTime":"2020.09.06 周日","price":"120-280","city":"南京","address":"江苏大剧院--综艺厅","pic":"https://img.alicdn.com/bao/uploaded/i3/2251059038/O1CN01FMizHi2GdSG0AINxP_!!2-item_pic.png"},{"id":623125350409,"name":"大船文化 法国艺术启蒙魔术剧《美术馆奇妙夜·星夜》中文版","showTime":"2020.08.27-08.30","price":"80-480","city":"上海","address":"上汽上海文化广场","pic":"https://img.alicdn.com/bao/uploaded/https://img.alicdn.com/imgextra/i4/2251059038/O1CN01CiAVft2GdSFpIawAw_!!2251059038.jpg"},{"id":623975390263,"name":"正版授权大型实景舞台剧《奥特曼:宇宙之光》(杭州站)","showTime":"2020.12.13 周日","price":"68-480","city":"杭州","address":"杭州剧院","pic":"https://img.alicdn.com/bao/uploaded/https://img.alicdn.com/imgextra/i4/2251059038/O1CN01fUBSCY2GdSFsbnPPh_!!2251059038.jpg"}]
![](https://i-blog.csdnimg.cn/blog_migrate/73ea315ad77109c43ed9c19189b634f6.png)