今天是商品列表和商品详情功能的总结。这个功能也就是淘宝的首页那种列表然后点击相应的商品会跳转到相应的详情页面我们只需要写一个详情页面就可以了。我们需要这些商品列表页goods_list.html展示所有商品的缩略信息用户可以通过点击商品卡片查看商品详情。商品详情页goods_details.html展示单个商品的详细信息包括商品图片、描述、价格和已售数量等。商品数据goods.json存储所有商品的相关信息如名称、价格、图片链接等。JavaScript goods_list.js 和 goods_details.js负责数据的加载、处理和页面的交互以及渲染。整体流程数据准备将商品信息存储在 goods.json 文件中。商品列表页加载通过 XMLHttpRequest 从 goods.json 文件中获取商品数据并将其动态插入到页面中。商品详情页跳转用户点击商品卡片时将商品数据存储到 localStorage 中并跳转到商品详情页。商品详情页加载从 localStorage 中获取商品数据并将其动态插入到页面中。商品列表页的实现HTML 结构goods_list.html 文件定义了商品列表页的基本结构包括顶部标题、搜索框和商品展示区域。!-- 主页顶部 --div classheader_title主页/div!-- 搜索分类 --div classsearch_boxdiv classsearchimg src./img/search.png alt /input typetext name id placeholder请输入搜索内容/divp分类/p/divdiv classgoods_content/divscript srcjs/goods_list.js/scriptAI写代码html具体的 CSS 样式可以根据需求进行调整主要用于设置页面的布局、字体、颜色等。* {margin: 0%;padding: 0%;}body {padding-top: 10px;}/* 最顶部标题主页 */.header_title {width: 100%;height: 50px;display: flex;justify-content: center;align-items: center;/* background-color: aqua; */font-size: 19px;font-weight: 600;position: fixed;background-color: white;top: 0;z-index: 6;}/* 搜索分类 */.search_box {width: 100%;height: 40px;/* background-color: blue; */display: flex;margin-top: 13%;}/* 搜索 */.search {width: 85%;height: 60%;display: flex;border-radius: 40px;margin: 2%;background-color: #EDEDED;}.search img {margin-top: 3px;margin-left: 6px;width: 6%;height: 22px;}.search input {width: 80%;border: none;outline-style: none;background-color: #EDEDED;}.search_box p {width: 10%;height: 100%;display: flex;align-items: center;font-size: 14px;/* background-color: chartreuse; */color: #969696;}.goods_content {padding-left: 6px;padding-right: 6px;column-count: 2;/* 定义列数可以根据需要调整 */column-gap: 10px;/* 定义列与列之间的间隙 *//* background-color: aquamarine; */}.goods_card {break-inside: avoid-column;/* 防止内容断裂到新列 */margin-bottom: 10px;/* 定义项目之间的垂直间距 */background-color: #f0f0f0;/* 背景颜色仅为了示例 */padding: 6px;/* 内边距 */border-radius: 5px;}.goods_card img {width: 100%;}.card_title {font-size: 14px;text-overflow: ellipsis;overflow: hidden;text-wrap: nowrap;}.card_content{width: 100%;height: 20px;}/* 下方小价格标签 */.home_price {color: #ED414A;float: left;}.Past_price {font-size: 9px;color: #969696;float: left;line-height: 20px;margin-left: 7%;}.sold {font-size: 10px;color: #969696;float: left;line-height: 20px;margin-left: 9%;}AI写代码cssjs 文件负责从 goods.json 文件中加载商品数据并将其动态插入到页面中。let body document.getElementsByClassName(goods_content)[0];let xhr new XMLHttpRequest();xhr.open(get, js/goods.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);reader(data);}};function reader(data) {let str ;for (let i 0; i data.length; i) {str div classgoods_card onclickclicks(${JSON.stringify(data[i])})img src${data[i].product_images[0]} alt /p classcard_title${data[i].name}/pdiv classcard_contentspan classhome_price${data[i].price}/spanp styletext-decoration:line-through; classPast_price6000/pp classsold已售${data[i].sold}/p/div/div;}body.innerHTML str;}function clicks(data){let datas JSON.stringify(data);localStorage.setItem(goods, datas);window.location.href goods_details.html;}AI写代码javascript运行当用户点击商品卡片时clicks 函数会将商品数据存储到 localStorage 中并跳转到商品详情页。商品详情页的实现HTML 结构div classheaderspan onclickisback()img src./img/箭头.png alt //span详情/divdiv classcommodity_details-boxdiv classcommodity_details/div/divdiv classgoods_content/divdiv classcontent_titlestrongp商品详情图/p/strong/divdiv classdetail_img/divdiv classfooter_navdiv classnav_shop iconimg src./img/_店铺.png alt /p店铺/p/divdiv classservice iconimg src./img/客服.png alt /p客服/p/divdiv classcollect iconimg src./img/收藏.png alt /p收藏/p/divdiv classgoods_buystrong点击购买/strong/div/divscript srcjs/goods_details.js/scriptAI写代码htmlgoods_details.html 文件定义了商品详情页的基本结构包括顶部标题、商品图片轮播、商品详情内容和底部导航栏。CSS 样式*{margin: 0;padding: 0;}.header {width: 100%;height: 35px;font-size: 17px;font-weight: 700;text-align: center;position: fixed;padding-top: 10px;top: 1;background-color: white;}.header span {float: left;margin-left: 1%;}.commodity_details-box {width: 100%;height: 330px;overflow: hidden;}.commodity_details {width: 400%;font-size: 0px;animation: banner 10s infinite;}.commodity_details img {width: 25%;height: 330px;}/* 轮播图动画 */keyframes banner {0% {margin-left: 0px;}33.33% {margin-left: -100%;}66.66% {margin-left: -200%;}100% {margin-left: -300%;}}/* 商品详情内容 */.detail_content{width: 100%;height: 50px;/* display: flex; *//* justify-content: space-around; *//* background-color: aquamarine; */}.detail_content p{width: 96%;margin-left: 6px;/* text-align: center; *//* background-color: aqua; *//* 溢出字变省略号 *//* overflow: hidden;text-overflow: ellipsis;white-space: nowrap; */}/* 价格相关 */.detail_price{width: 100%;height: 40px;display: flex;align-items: end;/* background-color: aqua; */}.detail_price p{width: auto;padding: 1%;margin-left: 1%;}.now_price{font-size: 20px;color: red;}.sold_number{font-size: 13px;color: #969696;}.detail_img img{width: 100%;}.header img{width: 20px;height: 20px;}.footer_nav{width: 100%;height: 50px;padding-top: 10px;display: flex;position: fixed;bottom: 0%;background-color: white;}.icon{width: 10%;margin-left: 4%;font-size: 14px;}.footer_nav img{width: 70%;}.goods_buy{width: 50%;height: 40px;margin-left: 4%;border-radius: 25px;color: white;font-size: 20px;text-align: center;line-height: 40px;background-color: #FF7601;}.content_title{width: 100%;height: 40px;text-align: center;font-size:18px;line-height: 40px;}AI写代码cssCSS 样式用于实现商品图片的轮播效果和页面的布局。通过 animation 属性和 keyframes 规则实现了商品图片的自动轮播。具体的 CSS 样式可以根据需求进行调整主要用于设置页面的布局、字体、颜色和动画效果let data JSON.parse(localStorage.getItem(goods))let body document.getElementsByClassName(commodity_details)[0]let contentdocument.getElementsByClassName(goods_content)[0];let deta_imgdocument.getElementsByClassName(detail_img)[0];console.log(data);reader()function reader() {let str ;for (let i 0; i data.product_images.length; i) {str img src${data.product_images[i]};}str img src${data.product_images[0]};body.innerHTML str;let strs;strs!-- 内容详情 --div classdetail_contentp${data.description}/p/div!-- 价格之类的div --div classdetail_pricep classnow_price${data.price}/pp classsold_number已售${data.sold}/p/div;content.innerHTMLstrs;let sti;stiimg src${data.thumbnail_images[0]} alt /img src${data.thumbnail_images[1]} alt /img src${data.thumbnail_images[2]} alt /;deta_img.innerHTMLsti;}function isback() {window.history.back();localStorage.removeItem(goods);}AI写代码javascript运行js 文件负责从 localStorage 中获取商品数据并将其动态插入到页面中。当用户点击返回箭头时isback 函数会返回上一页并清除 localStorage 中的商品数据。————————————————版权声明本文为CSDN博主「好青崧」的原创文章遵循CC 4.0 BY-SA版权协议转载请附上原文出处链接及本声明。原文链接https://blog.csdn.net/jht_520/article/details/147139093