原生JS淘宝购物车页面.zip资源-CSDN下载

共20个文件

jpg：11个

gif：4个

png：1个

版权申诉

课程资源

94 浏览量 2023-07-29 10:38:59 上传评论收藏 78KB ZIP 举报

原生JavaScript淘宝购物车页面是一个基于纯JavaScript实现的电商应用示例，主要涵盖了前端开发中的常见技术与设计模式。在创建这样一个页面时，开发者需要掌握以下几个核心知识点： 1. **DOM操作**：JavaScript是用于操作网页文档对象模型（DOM）的主要语言。在购物车页面中，你需要动态添加、删除商品，更新商品数量，这些都需要对DOM进行操作。例如，通过`document.getElementById`、`document.querySelector`或`document.querySelectorAll`来选取元素，然后使用`appendChild`、`removeChild`等方法来改变页面结构。 2. **事件处理**：购物车页面中会有许多交互元素，如“加入购物车”按钮、“增加/减少数量”的按钮等。你需要用`addEventListener`来绑定点击事件，当用户点击时执行相应的功能，如添加商品到购物车、修改商品数量等。 3. **数据存储**：购物车中的商品信息需要持久化存储，以防刷新页面后丢失。原生JavaScript可以使用`localStorage`或`sessionStorage`来实现数据存储，但需要注意它们都是基于字符串的键值对存储，所以需要将商品数据序列化和反序列化。 4. **计算与逻辑**：购物车页面需要实时显示商品总价、优惠情况等信息。这就涉及到JavaScript的数学运算和条件判断。例如，根据商品数量和单价计算总价，或者根据促销策略计算折扣。 5. **AJAX异步通信**：如果购物车需要与服务器进行交互，如添加商品到数据库、获取用户信息等，就要使用AJAX（Asynchronous JavaScript and XML）技术。原生的`XMLHttpRequest`对象可以实现异步请求，但现在更常用的是`fetch` API，它提供了更加简洁和现代的接口。 6. **JSON格式**：在与服务器交换数据时，通常会使用JSON（JavaScript Object Notation）格式，因为它是轻量级且易于阅读和编写的数据交换格式。原生JavaScript提供了`JSON.parse`和`JSON.stringify`方法来进行JSON数据的解析和序列化。 7. **CSS样式与布局**：虽然主要讨论的是JavaScript，但创建购物车页面还需要了解CSS。你需要设置元素的样式，使其看起来美观并适应不同的屏幕尺寸。响应式设计是必不可少的，可以使用媒体查询（Media Queries）来实现。 8. **模块化与封装**：为了保持代码的可读性和可维护性，可以使用原生JavaScript的闭包或IIFE（立即调用的函数表达式）来封装功能模块，避免全局变量污染。 9. **事件委托**：当有大量动态生成的元素需要监听事件时，事件委托是一种高效的方法。在父元素上添加一个事件监听器，然后通过事件冒泡机制来处理子元素的事件。 10. **错误处理**：良好的错误处理能提升应用的健壮性。在可能出错的地方添加try-catch语句，或者使用`.catch`处理Promise的错误，确保程序在异常情况下也能优雅地运行。在学习和实践这个项目时，你将深入理解JavaScript的各个方面，并能将其应用于实际的前端开发工作中。同时，这也将是提升你对前端全栈开发理解的一个重要步骤。

资源推荐

资源详情

资源评论

收起资源包目录

原生JS淘宝购物车页面.zip （20个子文件）

原生JS淘宝购物车页面

myCart.js 3KB

css

myCart.css 3KB

images

taobao_cart_04.jpg 5KB

taobao_bg.png 767B

Thumbs.db 36KB

taobao_icon_02.jpg 8KB

taobao_relation.jpg 13KB

taobao_cart_02.jpg 2KB

taobao_adding.jpg 7KB

taobao_logo.gif 3KB

li_err.gif 1023B

taobao_subtn.jpg 13KB

li_ok.gif 1024B

taobao_icon_01.jpg 8KB

taobao_cart_01.jpg 4KB

taobao_cart_03.jpg 3KB

taobao_del.jpg 11KB

taobao_minus.jpg 7KB

register_bg.gif 217B

demo.html 7KB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>淘宝购物车页面</title> <link href="css/myCart.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" src="js/myCart.js"></script> </head> <body> <div id="header"><img src="images/taobao_logo.gif" alt="logo" /></div> <div id="nav">您的位置：<a href="#">首页</a> > <a href="#">我的淘宝</a> > 我的购物车</div> <div id="navlist"> <ul> <li class="navlist_red_left"></li> <li class="navlist_red">1. 查看购物车</li> <li class="navlist_red_arrow"></li> <li class="navlist_gray">2. 确认订单信息</li> <li class="navlist_gray_arrow"></li> <li class="navlist_gray">3. 付款到支付宝</li> <li class="navlist_gray_arrow"></li> <li class="navlist_gray">4. 确认收货</li> <li class="navlist_gray_arrow"></li> <li class="navlist_gray">5. 评价</li> <li class="navlist_gray_right"></li> </ul> </div> <div id="content"> <table width="100%" border="0" cellspacing="0" cellpadding="0" id="shopping"> <form action="" method="post" name="myform"> <tr> <td class="title_1"><input id="allCheckBox" type="checkbox" value="" onclick="selectAll()" />全选</td> <td class="title_2" colspan="2">店铺宝贝</td> <td class="title_3">获积分</td> <td class="title_4">单价（元）</td> <td class="title_5">数量</td> <td class="title_6">小计（元）</td> <td class="title_7">操作</td> </tr> <tr> <td colspan="8" class="line"></td> </tr> <tr> <td colspan="8" class="shopInfo">店铺：<a href="#">纤巧百媚时尚鞋坊</a> 卖家：<a href="#">纤巧百媚</a> <img src="images/taobao_relation.jpg" alt="relation" /></td> </tr> <tr id="product1"> <td class="cart_td_1"><input name="cartCheckBox" type="checkbox" value="product1" onclick="selectSingle()" /></td> <td class="cart_td_2"><img src="images/taobao_cart_01.jpg" alt="shopping"/></td> <td class="cart_td_3"><a href="#">日韩流行风时尚美眉最爱独特米字拼图金属坡跟公主靴子黑色</a><br /> 颜色：棕色尺码：37<br /> 保障：<img src="images/taobao_icon_01.jpg" alt="icon" /></td> <td class="cart_td_4">5</td> <td class="cart_td_5">138.00</td> <td class="cart_td_6"><img src="images/taobao_minus.jpg" alt="minus" onclick="changeNum('num_1','minus')" class="hand"/> <input id="num_1" type="text" value="1" class="num_input" readonly="readonly"/> <img src="images/taobao_adding.jpg" alt="add" onclick="changeNum('num_1','add')" class="hand"/></td> <td class="cart_td_7"></td> <td class="cart_td_8"><a href="javascript:deleteRow('product1');">删除</a></td> </tr> <tr> <td colspan="8" class="shopInfo">店铺：<a href="#">香港我的美丽日记</a> 卖家：<a href="#">lokemick2009</a> <img src="images/taobao_relation.jpg" alt="relation" /></td> </tr> <tr id="product2"> <td class="cart_td_1"><input name="cartCheckBox" type="checkbox" value="product2" onclick="selectSingle()" /></td> <td class="cart_td_2"><img src="images/taobao_cart_02.jpg" alt="shopping"/></td> <td class="cart_td_3"><a href="#">chanel/香奈尔/香奈尔炫亮魅力唇膏3.5g</a><br /> 保障：<img src="images/taobao_icon_01.jpg" alt="icon" /> <img src="images/taobao_icon_02.jpg" alt="icon" /></td> <td class="cart_td_4">12</td> <td class="cart_td_5">265.00</td> <td class="cart_td_6"><img src="images/taobao_minus.jpg" alt="minus" onclick="changeNum('num_2','minus')" class="hand"/> <input id="num_2" type="text" value="1" class="num_input" readonly="readonly"/> <img src="images/taobao_adding.jpg" alt="add" onclick="changeNum('num_2','add')" class="hand"/></td> <td class="cart_td_7"></td> <td class="cart_td_8"><a href="javascript:deleteRow('product2');">删除</a></td> </tr> <tr> <td colspan="8" class="shopInfo">店铺：<a href="#">实体经营</a> 卖家：<a href="#">林颜店铺</a> <img src="images/taobao_relation.jpg" alt="relation" /></td> </tr> <tr id="product3"> <td class="cart_td_1"><input name="cartCheckBox" type="checkbox" value="product3" onclick="selectSingle()"/></td> <td class="cart_td_2"><img src="images/taobao_cart_03.jpg" alt="shopping"/></td> <td class="cart_td_3"><a href="#">蝶妆海晳蓝清滢粉底液10#（象牙白）</a><br /> 保障：<img src="images/taobao_icon_01.jpg" alt="icon" /> <img src="images/taobao_icon_02.jpg" alt="icon" /></td> <td class="cart_td_4">3</td> <td class="cart_td_5">85.00</td> <td class="cart_td_6"><img src="images/taobao_minus.jpg" alt="minus" onclick="changeNum('num_3','minus')" class="hand"/> <input id="num_3" type="text" value="1" class="num_input" readonly="readonly"/> <img src="images/taobao_adding.jpg" alt="add" onclick="changeNum('num_3','add')" class="hand"/></td> <td class="cart_td_7"></td> <td class="cart_td_8"><a href="javascript:deleteRow('product3');">删除</a></td> </tr> <tr> <td colspan="8" class="shopInfo">店铺：<a href="#">红豆豆的小屋</a> 卖家：<a href="#">taobao豆豆</a> <img src="images/taobao_relation.jpg" alt="relation" /></td> </tr> <tr id="product4"> <td class="cart_td_1"><input name="cartCheckBox" type="checkbox" value="product4" onclick="selectSingle()" /></td> <td class="cart_td_2"><img src="images/taobao_cart_04.jpg" alt="shopping"/></td> <td class="cart_td_3"><a href="#">相宜促销专供大S推荐最好用的LilyBell化妆棉</a><br /> 保障：<img src="images/taobao_icon_01.jpg" alt="icon" /></td> <td class="cart_td_4">12</td> <td class="cart_td_5">12.00</td> <td class="cart_td_6"><img src="images/taobao_minus.jpg" alt="minus" onclick="changeNum('num_4','minus')" class="hand"/> <input id="num_4" type="text" value="2" class="num_input" readonly="readonly"/> <img src="images/taobao_adding.jpg" alt="add" onclick="changeNum('num_4','add')" class="hand"/></td> <td class="cart_td_7"></td> <td class="cart_td_8"><a href="javascript:deleteRow('product4');">删除</a></td> </tr> <tr> <td colspan="3"><a href="javascript:deleteSelectRow()"><img src="images/taobao_del.jpg" alt="delete"/></a></td> <td colspan="5" class="shopend">商品总价（不含运费）：<label id="total" class="yellow"></label> 元<br /> 可获积分 <label class="yellow" id="integral"></label> 点<br /> <input name=" " type="image" src="images/taobao_subtn.jpg" /></td> </tr> </form> </table> <div style="text-align:center;"> <p>来源:<a href="http://www.mycodes.net/" target="_blank">源码之家</a></p> </div> </div> </body> </html>

评论收藏

内容反馈

版权申诉