淘宝购物车web页面模仿

采用HTML+CSS+原生JS手写，未使用组件开发。

效果图如下：

初始页面效果

目前可以实现动态添加商品，通过随机函数生成随机数，从已有的数据中选择商品数据添加到页面，生成的商品可以从列表中删除；

随机添加商品

删除商品

window.onload = function() {//商品信息，可以使用ajax请求后台数据let data = [{shopName:"古风衣装",imgUrl:"./img/items1.jpg",itemTxt:"扇子男生霸气中国风古装复古大号折叠扇随身汉服配饰古风折扇",type:"颜色分类",typeChoice:"10存且试天下+流苏10存且试天下+流苏10存且试天下+流苏",priceOld:"49.00",priceNew:"25.60"},{shopName:"旁氏旗舰店",imgUrl:"./img/items2.jpg",itemTxt:"旁氏氨基酸系洗面奶米粹竹炭樱粉洁面乳深层清洁毛孔洁面乳正品女",type:"颜色分类",typeChoice:"米粹洁面150g*2",priceOld:"73.20",priceNew:"64.90"},{shopName:"海澜之家",imgUrl:"./img/items3.jpg",itemTxt:"高级感巴洛克衬衫男设计感小众情侣冰丝长袖衬衣夏季薄款外套潮牌",type:"颜色分类",typeChoice:"白色长袖2XL",priceOld:"90.00",priceNew:"68.87"},{shopName:"阿里大药房",imgUrl:"./img/items4.jpg",itemTxt:"明康欣阿达帕林凝胶祛痘膏30g*1支/盒正品痤疮正品保证丘疹粉刺",type:"套餐类型",typeChoice:"标准装",priceOld:"53.20",priceNew:"39.20"},{shopName:"阿里大药房",imgUrl:"./img/items4.jpg",itemTxt:"明康欣阿达帕林凝胶祛痘膏30g*1支/盒正品痤疮正品保证丘疹粉刺",type:"套餐类型",typeChoice:"标准装",priceOld:"53.20",priceNew:"39.20"}];//随机函数function getRndInteger(min, max) {return Math.floor(Math.random() * (max - min) ) + min;}let main_con = document.querySelector('main .tb_main_content');let add_btn = document.querySelector('.add_btn .btn-default');let title_num = document.querySelector('main .tb_main_title span')add_btn.addEventListener('click',()=>{let i = getRndInteger(0,data.length);let div_item = document.createElement('div');div_item.setAttribute('class', 'tb_main_content_items');//将div内容以模板字符串形式赋给div_itemdiv_item.innerHTML = `<div class="items_title"><input type="checkbox" id="shop_select"><label for="shop_select"></label><span id="shop">店铺：</span><span id="shop_name">${data[i].shopName}</span></div><div class="items_content"><ul class="items_inner"><li class="items_checkbox"><input type="checkbox" id="items_check_box"><label for="items_check_box"></label></li><li id="items_info"><div id="items_information"><img src="${data[i].imgUrl}" alt="商品首图"><div class="items_information_right"><p><a href="#">${data[i].itemTxt}</a></p><div class="placeholder"></div><div class="icons"><img src="img/icon1.png" alt=""><img src="img/icon2.jpg" alt=""><img src="img/icon3.png" alt=""></div></div></div></li><li id="items_classify"><div class="classify-content"><span id="classify-name">${data[i].type}：</span><p id="classify-description">${data[i].typeChoice}</p></div></li><li id="items_prices"><div class="prices-content"><div class="prices-old"><span>￥</span><em>${data[i].priceOld}</em></div><div class="prices-new"><span>￥</span><em>${data[i].priceNew}</em></div></div></li><li id="items_amounts"><div class="amounts-content"><div class="amounts-inner"><a href="#" class="Minus">-</a><input type="text" value="1" class="text-amount" data-max="99999999" data-now="1" autocomplete="off"><a href="#" class="Plus">+</a></div></div></li><li id="items_sum-number"><div class="sum-number-content"><span>￥</span><span id="prices">${data[i].priceNew}</span></div></li><li id="items_handle"><a href="#"><div class="handle_fav">移入收藏夹</div></a><a href="#"><div class="handle_del">删除</div></a></li></ul></div>`;//将单个商品信息的div_item追加给父元素main_conmain_con.insertBefore(div_item,main_con.children[0]);//获取元素let priceNew = document.querySelector('.tb_main_content .tb_main_content_items .items_content .items_inner #items_prices .prices-content .prices-new em');let Minus = document.querySelector('.tb_main_content .tb_main_content_items .items_content .items_inner #items_amounts a.Minus');let input = document.querySelector('.tb_main_content .tb_main_content_items .items_content .items_inner #items_amounts input');let Plus = document.querySelector('.tb_main_content .tb_main_content_items .items_content .items_inner #items_amounts a.Plus');let prices = document.querySelector('.tb_main_content .tb_main_content_items .items_content .items_inner #items_sum-number span');let del = document.querySelector('.tb_main_content .tb_main_content_items .items_content .items_inner #items_handle  a .handle_del');Minus.addEventListener('click', ()=>{if(input.value <= 1){   //<=具有隐式转换Minus.disabled = true;}else{input.value--;}// prices.innerHTML = (+priceNew.priceNew * +input.value).toFixed(2).toString();// console.log(input.value,typeof input.value);});Plus.addEventListener('click', ()=>{input.value++;Minus.disabled = false;// prices.innerHTML = (+priceNew.priceNew * +input.value).toFixed(2).toString();// console.log(input.value,typeof input.value);});del.addEventListener('click', ()=>{let msg = '确认要删除该商品吗？';if(confirm(msg) === true){main_con.removeChild(div_item);title_num.innerHTML = `购物车（全部${main_con.children.length-1}）`;}else{return false;}});title_num.innerHTML = `购物车（全部${main_con.children.length-1}）`;// console.log(main_con.children.length-1);});
}

尚未实现的功能：复选框的选择链，金额的计算。

项目代码链接：https://github.com/NLP-LZ/cristine.github.io

淘宝购物车web页面模仿相关推荐

web淘宝电商页面搭建
web淘宝电商页面搭建点击此处下载完整代码图片效果展示首屏内容次屏内容整体代码并不包含JavaScript部分,因此页面为静态页面,但代码包含了淘宝网的鼠标触发事件.
HTML淘宝购物车页面的实现
一.实验目的和要求本实验任务用HTML基本标签制作一个简单的淘宝购物车页面,具体要求如下: 以纯文本格式保存为*.html文件使用表格标签.div标签.span标签.图像标签等实现效果设计启用浏 ...
简要模仿淘宝购物车功能
一主要功能: 实现通过点击.拖动添加购物车,购物金额自动结算,以及删减物品的功能. 有待改进之处:还未实现在购物车内实现+1,-1功能. 二.效果图三.相关代码 1,HTML+JS <!DOC ...
淘宝购物车页面 PC端和移动端实战
最近花了半个月的时间,做了一个淘宝购物车页面的Demo.当然,为了能够更加深入的学习,不仅仅有PC端的固定宽度的布局,还实现了移动端在Media Query为768px以下(也就是实现了ipad,ip ...
淘宝购物车页面智能搜索框Ajax异步加载数据
如果有朋友对本篇文章的一些知识点不了解的话,可以先阅读此篇文章.在这篇文章中,我大概介绍了一下构建淘宝购物车页面需要的基础知识. 这篇文章主要探讨的是智能搜索框Ajax异步加载数据.jQuery的社区 ...
淘宝购物车页面测试用例
淘宝购物车的功能测试点有很多,这里我只写一部分,如图: 欢迎补充!!!!!!!!
面试高频问题——“淘宝购物车”怎么测试
面试高频问题--"淘宝购物车"怎么测试测试思维依然附上测试任何事物的测试思路: 第一步:梳理产品的核心业务流程:明白这是个什么项目,实现了什么业务,以及是怎么实现的? 这个步骤 ...
淘宝购物车前端（JS和Angularjs版本)
今天用HTML和JS实现以下购物车,然后再用Angualrjs再去实现一下购物车的前端实现. 功能页面分析: 既然是做模仿淘宝购物车,肯定要先去分析一下淘宝的购物车页面,自己去淘宝卖了两件东西,看了下 ...
你能说说“淘宝购物车”怎么测试么？
前言之前我有整理过一系列文章"支付功能如何测试?","抖音直播要如何测试","微信红包如何测试",很多学生说是及时雨,帮助了他们的测试面试 ...

淘宝购物车web页面模仿

淘宝购物车web页面模仿相关推荐

最新文章

热门文章