商品列表商品制作详情
商品列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>商品列表</title>
<style>
* {
padding: 0;
margin: 0;
}
h1 {
width: 100%;
height: 60px;
text-align: center;
line-height: 60px;
}
.box {
width: 100%;
}
.box_img {
width: 45%;
height: 170px;
margin-bottom: 10px;
margin-left: 3%;
float: left;
}
.box_img img {
width: 100%;
height: 100px;
}
.font {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 20px;
}
.price {
color: red;
font-size: 25px;
}
</style>
</head>
<body>
<!-- 标题 -->
<h1 >商品列表</h1>
<!-- 列表框架 -->
<div class="box">
<!-- <div class="box_img">
<img src="https://so1.360tres.com/dr/270_500_/t01c3776de38c3cab47.jpg?size=360x210" alt="" />
<b>
<p class="font">5斤整箱水蜜桃水果新鲜当季现摘现发脆桃孕妇桃子现货应季甜毛桃</p>
<p class="price">¥12.8</p>
</b>
</div> -->
</div>
<script>
let xhr = new XMLHttpRequest();
xhr.open('get', 'js/details.json', true);
xhr.send();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
let text = xhr.responseText;
console.log(text);
let data = JSON.parse(text);
console.log(data);
fu(data);
}
}
function fu(data) {
let str = '';
for (let i = 0; i < data.length; i++) {
str += `<div class="box_img" onclick="tar(${data[i].id})">
<img src="${data[i].imgs[0]}">
<b>
<p class="font">${data[i].referal}</p>
<p class="price">${data[i].price}</p>
</b>
</div>`
}
document.getElementsByClassName('box')[0].innerHTML = str;
}
function tar(id){
sessionStorage.setItem("sp",id);
window.location.href="details.html";
}
</script>
</body>
</html>
商品详情
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>商品详情</title>
<style>
* {
padding: 0;
margin: 0;
}
h1 {
width: 100%;
height: 60px;
text-align: center;
line-height: 60px;
}
.visible {
width: 100%;
height: 200px;
overflow-x: hidden;
}
.overflow {
width: 500%;
height: 200px;
animation: 5s details infinite;
}
.overflow img {
width: 20%;
height: 200px;
float: left;
}
@keyframes details {
0% {
margin-left: 0;
}
25% {
margin-left: -100%;
}
50% {
margin-left: -200%;
}
75% {
margin-left: -300%;
}
100% {
margin-left: -400%;
}
}
.font {
font-size: 20px;
}
.price {
color: red;
font-size: 25px;
margin-left: 75%;
}
</style>
</head>
<body>
<h1>商品详情</h1>
<div class="box">
</div>
<script>
let xhr = new XMLHttpRequest();
xhr.open('get', 'js/details.json', true);
xhr.send();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
let text = xhr.responseText;
console.log(text);
let data = JSON.parse(text);
console.log(data);
target(data);
}
}
let a = sessionStorage.getItem('sp');
console.log(a);
function target(data) {
let str = '';
for (let i = 0; i < data.length; i++) {
if (data[i].id == a) {
str = `<div class="visible">
<div class="overflow">`
for(let j=0;j<data[i].details.length;j++){
str+=`<img src="${data[i].details[j]}">`
};
str+=`</div>
</div>
<b>
<p class="font">${data[i].referal}</p>
<p class="price">${data[i].price}</p>
</b>`
}
}
document.getElementsByClassName('box')[0].innerHTML = str;
}
</script>
</body>
</html>
假数据
[{
"id": 1,
"name": "桃子",
"imgs": [
"https://so1.360tres.com/dr/270_500_/t01c3776de38c3cab47.jpg?size=360x210"
],
"referal": "5斤整箱水蜜桃水果新鲜当季现摘现发脆桃孕妇桃子现货应季甜毛桃 ",
"price": "¥12.8",
"details": [
"https://p3.itc.cn/q_70/images03/20220715/404e02f8a95d4ba49c9811b831d214a7.png",
"https://img2.baidu.com/it/u=2370907083,3069296723&fm=253&fmt=auto&app=138&f=JPEG?w=1067&h=800",
"https://img0.baidu.com/it/u=2454263363,3057890496&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1422",
"http://img1.baidu.com/it/u=3950922726,3989599075&fm=253&app=138&f=JPEG?w=800&h=1422"
]
}, {
"id": 2,
"name": "苹果",
"imgs": [
"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.alicdn.com%2Fi2%2F2201298385234%2FO1CN01dE9SRt1oXDbiU0PWf_%21%212201298385234-0-lubanu-s.jpg&refer=http%3A%2F%2Fimg.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1723198295&t=092e5919c29dee12a3bc955dbefff870"
],
"referal": "正宗甘肃高原新鲜红富士苹果当季水果脆甜多汁箱装产地包邮直发",
"price": "¥19.9",
"details": [
"https://imgservice.suning.cn/uimg1/b2c/image/nS6xqqGQ0S-kT4z5YvbQ7Q.jpg_",
"https://img0.baidu.com/it/u=215526505,3577184230&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
"https://a.vpimg3.com/upload/merchandise/pdc/356/790/318706072491790356/0/201608180090-1.jpg",
"https://img2.baidu.com/it/u=212366177,1411760085&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=347",
"https://imgservice.suning.cn/uimg1/b2c/image/nS6xqqGQ0S-kT4z5YvbQ7Q.jpg_"
]
}, {
"id": 3,
"name": "香蕉",
"imgs": [
"https://001.img.pu.sohu.com.cn/group2/M07/E8/EE/MTAuMTAuODguODE=/100114_1521774157158_100199042_ugcvcut.jpg"
],
"referal": "云南高山香蕉新鲜水果当季整箱大芭蕉叶小米蕉甜香焦10自然熟",
"price": "¥27.42",
"details": [
"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.alicdn.com%2Fi4%2F2208781718035%2FO1CN01MlMY9M29E521DlOB2_%21%212208781718035.jpg_430x430q90.jpg&refer=http%3A%2F%2Fimg.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1723247980&t=cbc5df5fd75524917f024d373fa54b89",
"https://001.img.pu.sohu.com.cn/group2/M07/E8/EE/MTAuMTAuODguODE=/100114_1521774157158_100199042_ugcvcut.jpg",
"https://p6.itc.cn/images01/20200720/b283462f2a6846e5a8a3e49a65e21cd8.jpeg",
"https://img.zcool.cn/community/0125ac5fc7297c11013fdcc72601b3.jpg@1280w_1l_2o_100sh.jpg",
"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.alicdn.com%2Fi4%2F2208781718035%2FO1CN01MlMY9M29E521DlOB2_%21%212208781718035.jpg_430x430q90.jpg&refer=http%3A%2F%2Fimg.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1723247980&t=cbc5df5fd75524917f024d373fa54b89"
]
}, {
"id": 4,
"name": "西瓜",
"imgs": [
"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fg-search1.alicdn.com%2Fimg%2Fbao%2Fuploaded%2Fi2%2F2200751299948%2FO1CN01RPZ86n2NMEpLGTbBJ_%21%212200751299948.jpg_300x300.jpg&refer=http%3A%2F%2Fg-search1.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1723198419&t=f216b55da3303ee271caf4a83f0176c2"
],
"referal": "正宗湖南麒麟西瓜新鲜8424西瓜新鲜水果冰糖红心应季水果整箱包邮",
"price": "¥39",
"details": [
"https://img12.360buyimg.com/imgzone/jfs/t1/220600/1/5696/227046/619f64e9E84b5985d/c082e93c1a4f0957.jpg",
"https://a.zdmimg.com/202207/27/62e08bf547cc53247.jpg_e680.jpg",
"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimage109.360doc.com%2FDownloadImg%2F2020%2F07%2F1814%2F196302016_1_20200718022759630&refer=http%3A%2F%2Fimage109.360doc.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1723248030&t=63b85654d2f9c9a34d2b9b940949a602",
"https://t12.baidu.com/it/u=1135292016,213017744&fm=30&app=106&f=JPEG?w=640&h=960&s=A6E24AB00A5601D2D68AD6AE0300F009",
"https://img12.360buyimg.com/imgzone/jfs/t1/220600/1/5696/227046/619f64e9E84b5985d/c082e93c1a4f0957.jpg"
]
}, {
"id": 5,
"name": "李子",
"imgs": [
"https://img2.baidu.com/it/u=101964377,3530751535&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500"
],
"referal": "红心李子五月脆李子新鲜水果四川云南贵州三华李多汁蜂糖李脆甜李",
"price": "¥21",
"details": [
"https://img1.baidu.com/it/u=4121806542,3326482719&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=510",
"https://img2.baidu.com/it/u=101964377,3530751535&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500",
"https://p9.itc.cn/q_70/images01/20210715/34bce51c89344e36bf6636899fda9d65.jpeg",
"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcbu01.alicdn.com%2Fimg%2Fibank%2FO1CN01rUTeJY1jbjUcS1EeW_%21%212210065664567-0-cib.jpg&refer=http%3A%2F%2Fcbu01.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1723248100&t=19df72265430e61a5d2d4393e053ef0f",
"https://img1.baidu.com/it/u=4121806542,3326482719&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=510"
]
}, {
"id": 6,
"name": "橘子",
"imgs": [
"https://img0.baidu.com/it/u=3899038221,3614245934&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500"
],
"referal": "广西武鸣沃柑10斤橘子新鲜水果当季整箱一级皇帝蜜柑橘砂糖桔包邮",
"price": "¥35.8",
"details": [
"https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2023%2F1227%2F96af72a4j00s6b23o001qd200k000k0g00eo00eo.jpg&thumbnail=660x2147483647&quality=80&type=jpg",
"https://p4.itc.cn/q_70/images03/20231208/920855038b874b0083cc4d659764bbb6.jpeg",
"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcbu01.alicdn.com%2Fimg%2Fibank%2FO1CN01WrehNW1Vqw9jRON4m_%21%212215080532705-0-cib.jpg&refer=http%3A%2F%2Fcbu01.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1723248169&t=cdb050622cc42212a8b9526ef66ebe82",
"https://img0.baidu.com/it/u=2161757716,1329449577&fm=253&fmt=auto&app=138&f=JPEG?w=829&h=500",
"https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2023%2F1227%2F96af72a4j00s6b23o001qd200k000k0g00eo00eo.jpg&thumbnail=660x2147483647&quality=80&type=jpg"
]
}, {
"id": 7,
"name": "榴莲",
"imgs": [
"https://img2.baidu.com/it/u=2536303411,845584729&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=749"
],
"referal": "马来西亚猫山王榴莲正品D197液氮进口顺丰包邮新鲜水果肉一整个盒 ",
"price": "¥307",
"details": [
"https://img.zcool.cn/community/015b42608ce4dd11013e3b7d0c8880.jpg@2o.jpg",
"https://imgservice.suning.cn/uimg1/b2c/image/sZerns40PvQdIecqtFGwCQ.jpg_800w_800h_4e",
"https://img2.baidu.com/it/u=1791913184,761295279&fm=253&fmt=auto&app=138&f=JPEG?w=760&h=922",
"http://img2.baidu.com/it/u=3107061520,3538379867&fm=253&app=138&f=JPEG?w=712&h=712",
"https://img.zcool.cn/community/015b42608ce4dd11013e3b7d0c8880.jpg@2o.jpg"
]
}]