<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
//自定義模板
<script type="text/template" id="app_tpl">
<div class="product">
<div class="imageContainer">
<img src="{#img#}" />
<div class="layer">
<p>找同款</p>
<p>找相似</p>
</div>
</div>
<div class="concent">
<p class="price">
<span class="price-text">￥{#price#}</span>
<span class="sum">{#sales#}人付款</span>
</p>
<p class="title">{#title#}</p>
<p class="stroe">
<span class="stroe-title">{#store#}</span>
<span class="adress">{#adress#}</span>
</p>
</div>
</div>
</script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#app {
width: 1088px;
margin: 50px auto;
font-family: "微軟雅黑";
}
.product {
width: 250px;
height: 360px;
float: left;
border: 1px solid #ccc;
margin: 10px;
}
.product:hover{
border: 1px solid #555B24;
}
.imageContainer{
position: relative;
width: 250px;
height: 250px;
}
.product:hover .layer {
display: block;
}
.layer{
height:40px ;
background: #F55B24;
position: absolute;
bottom: 0;
left: 0;
display: none;
}
.layer p {
width: 125px;
float: left;
line-height: 30px;
color: #fff;
font-size: 12px;
text-align: center;
}
.content {
padding: 10px;
}
.content .price {
width: 100%;
line-height: 40px;
height: 40px;
}
.price{
height: 30px;
}
.price .price-text {
color: #F55B24;
font-size: 20px;
float: left;
font-weight: bold;
}
.price .price-text span{
color: #fff;
font-size:12px;
background: #F55B24;
font-weight: 400;
vertical-align: top;
}
.price .sum {
color: #999;
font-size: 12px;
display: inline;
float: right;
}
.title {
color: #666;
font-size: 12px;
}
.stroe {
width: 100%;
color: #999;
font-size: 12px;
line-height: 30px;
}
.stroe .store-title {
float: left;
}
.stroe .adress {
float: right;
}
</style>
</head>
<body>
<div id="app"></div>
</body>
//js
<script type="text/javascript">
//js命名空間 定義一個工具方法庫
var Util = {
//獲取獲取元素數
id: function(id) {
return document.getElementById(id);
},
//封裝ajax方法
ajax: function(url, callback) {
//創建XMLHttpRequest對象
var xhr = new XMLHttpRequest();
//訂閱事件
xhr.onreadystatechange = function() {
if(xhr.readyState === 4) {
if(xhr.status === 200) {
var data = JSON.parse(xhr.responseText);
callback && callback(data);
}
}
}
xhr.open("get", url, true);
xhr.send(null);
}
}
//格式化字符串
function formDataString(str,data){
return str.replace(/\{#(\w+)#\}/g,function(match,$1){
// console.log(this,1) //this作用域
// console.log(arguments,2)//參數列表
return data[$1]===undefined?"":data[$1];
});
}
var tpl = Util.id("app_tpl").innerHTML;
var html="";
Util.ajax("data/list.json",function(data) {
var data=data.list;
for(var i=0;i<data.length;i++){
html+=formDataString(tpl,data[i])
}
Util.id('app').innerHTML=html;
})
</script>
</html>
//list.json
{
"errno": 0,
"list": [
{
"img": "images/1.jpg",
"price": "798.00",
"sales": "8",
"title": "帛薇兒2017春裝新款女裝條紋拼接連衣裙蝴蝶結中長款真絲連衣裙 ",
"store": "pokwai服飾旗艦店",
"adress": "廣東 深圳"
},
{
"img": "images/2.jpg",
"price": "168.00",
"sales": "2946",
"title": "加棉毛呢短外套短款刺綉棒球服女秋冬季2016新款潮加厚含羊毛呢子 ",
"store": "妍蝶旗艦店",
"adress": "浙江 杭州"
},
{
"img": "images/3.jpg",
"price": "699.00",
"sales": "974",
"title": "【多件多折】ochirly歐時力翻領羊毛呢大衣長外套1YY3345910 ",
"store": "ochirly官方旗艦店",
"adress": "廣東 廣州"
},
{
"img": "images/4.jpg",
"price": "19.90",
"sales": "584",
"title": "秋冬季女裝新款2016黑色打底衫女長袖t恤白色純棉上衣修身衣服潮 ",
"store": "嬌人聖典旗艦店",
"adress": "福建 廈門"
},
{
"img": "images/5.jpg",
"price": "38.89",
"sales": "430",
"title": "新款韓版黑白條紋修身2016長袖T恤女秋打底衫莫代爾大碼女裝上衣 ",
"store": "xy服飾旗艦店",
"adress": "廣東 東莞"
},
{
"img": "images/6.jpg",
"price": "89.90",
"sales": "8637",
"title": "中老年女裝冬裝棉衣媽媽裝羽絨棉服中長款毛領外套老年人加厚棉襖 ",
"store": "胖胖家衣櫥",
"adress": "浙江 嘉興"
},
{
"img": "images/7.jpg",
"price": "69.00",
"sales": "3085",
"title": "秋冬季新款加絨加厚衛衣女裝套頭寬松韓版潮學生圓領長袖上衣外套 ",
"store": "米子旗旗艦店",
"adress": "廣東 廣州"
},
{
"img": "images/8.jpg",
"price": "49.90",
"sales": "3733",
"title": "百搭毛衣線衣韓版女裝套頭打底針織衫短款上衣秋冬季潮外套寬松 ",
"store": "黎雪兒旗艦店",
"adress": "江蘇 蘇州"
},
{
"img": "images/9.jpg",
"price": "19.00",
"sales": "355",
"title": "中老年女裝冬裝棉衣媽媽裝羽絨棉服中長款毛領外套老年人加厚棉襖 ",
"store": "娟子褲行",
"adress": "上海"
},
{
"img": "images/10.jpg",
"price": "118.00",
"sales": "968",
"title": "2016女裝新款秋冬裝針織衫女開衫百搭短款毛衣外套女秋冬季韓版潮 ",
"store": "瑪思狄拉旗艦店",
"adress": "浙江 嘉興"
},
{
"img": "images/11.jpg",
"price": "53.00",
"sales": "490",
"title": "2016秋冬季新款娃娃領女裝針織衫套頭打底衫修身毛衣女短款上衣潮 ",
"store": "詩梵米亞旗艦店",
"adress": "浙江 嘉興"
},
{
"img": "images/12.jpg",
"price": "28.80",
"sales": "2419",
"title": "秋冬新款女裝純色麻花毛衣女套頭韓版圓領短款針織衫上衣打底衫厚 ",
"store": "沐晗旗艦店",
"adress": "江蘇 蘇州"
}
]
}