商品列表商品制作详情
商品列表
<!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" ] }]
