html怎么做商品列表,纯js实现商品列表功能

最新推荐文章于 2024-07-12 10:47:18 发布

VS华

最新推荐文章于 2024-07-12 10:47:18 发布

阅读量4.5k

点赞数 2

文章标签： html怎么做商品列表

本文介绍了如何使用JavaScript从商品数据中动态创建商品列表。通过模拟的商品数据，展示了如何实例化Main对象，利用HTML结构和CSS样式呈现包括商品图片、标题、描述、价格等信息的商品卡片。同时，详细讲解了Main.js和Utils.js两个关键文件中的功能，Utils.js包含了一些实用的工具函数，如创建元素、插入CSS规则等。

摘要由CSDN通过智能技术生成

商品列表

功能需求：根据数据创建商品列表

来看一下效果：

html结构：模拟商品数据，根据数据实例化Main对象。

goodsList

import Main from './js/Main.js';

var arr=[

{img:"img01.webp",title:"不知火丑柑丑橘5斤装",desc:"第二件9.9元",price_desc:"1年历史最低价",price_now:"19.9",price_pre:"29.9",sale:"511",href:"https://item.jd.com/21562085787.html"},

{img:"img02.webp",title:"【第二件9.9】霜降圆柿饼2斤装",desc:"第二件9.9元",price_desc:"38天历史最低价",price_now:"19.9",price_pre:"39.9",sale:"130",href:"https://item.jd.com/62033699001.html"},

{img:"img03.webp",title:"第二件半价】融极厚切眼肉5片",desc:"第二件半价",price_desc:"88天历史最低价",price_now:"99",price_pre:"159",sale:"189",href:"https://item.jd.com/59888245671.html"},

{img:"img04.webp",title:"德州扒鸡500g 山东特产年货",desc:"88元选4件",price_desc:"134天历史最低价",price_now:"23.9",price_pre:"36.9",sale:"266",href:"https://item.jd.com/20821451207.html"},

{img:"img05.webp",title:"九善食活冻厄瓜多尔白虾",desc:"2份立减",price_desc:"32天历史最低价",price_now:"49",price_pre:"89",sale:"528",href:"https://item.jd.com/63882104774.html"},

{img:"img06.webp",title:"全母盛宴(2.0-2.3两)10只",desc:"现捕现发",price_desc:"82天历史最低价",price_now:"98",price_pre:"189",sale:"35",href:"https://item.jd.com/60387540668.html"},

{img:"img07.webp",title:"态好吃100%纯可可脂黑巧克力",desc:"买一送一丝滑细腻",price_desc:"181天历史最低价",price_now:"17.9",price_pre:"29.9",sale:"150",href:"https://item.jd.com/50895183185.html"},

{img:"img08.webp",title:"陶唐峪酱卤猪头肉500g",desc:"下酒菜",price_desc:"86天历史最低价",price_now:"29.5",price_pre:"49.8",sale:"140",href:"https://item.jd.com/58729017337.html"},

{img:"img09.webp",title:"乐锦记手撕面包2斤/整箱1000g",desc:"整箱2斤装",price_desc:"309天历史最低价",price_now:"19.8",price_pre:"29.8",sale:"259",href:"ht