【JavaScript_DOM 淘宝购物车】
让我们一起看一下淘宝的购物车是怎么做的吧，刚刚入门的我可能很多地方的用法都不够优化，不过个人感觉先把逻辑清晰之后再做的话其实也并不难哦，
以下是我做的页面代码：
HTML代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/index.css" />
</head>
<body>
<div class="container">
<!--logo-->
<img src="img/taobao_logo.gif" class="logo"/>
<!--nav-->
<div class="nav">
<span>您的位置：</span>
<a href="#" class="a">首页</a> >
<a href="#" class="a">我的淘宝</a> >
<a href="#">我的购物车</a>
</div>
<!--查看购物车-->
<ul class="lookcar">
<li><p class="li_p">1、查看购物车</p><span class="san"></span><img src="img/ji.png" class="jianto"/></li>
<li>2、确认订单信息<img src="img/ji.png" class="jianto"/></li>
<li>3、付款到支付宝<img src="img/ji.png" class="jianto"/></li>
<li>4、确认收回<img src="img/ji.png" class="jianto"/></li>
<li>5、评价</li>
</ul>
<table id="shopping">
<tr class="tr_top">
<td class="td1">
<input id="checkAll" type="checkbox" value="" onclick="checkAll()"/>全选
</td>
<td class="td2">店铺宝贝</td>
<td class="td3">获积分</td>
<td class="td4">单价（元）</td>
<td class="td5">数量</td>
<td class="td6">小计（元）</td>
<td class="td7">操作</td>
</tr> <!--商品1--> <tr class="tr2">
<td colspan="7">
店铺：<span class="blue">纤巧百媚时尚鞋坊</span> 卖家：<span class="blue">纤巧百媚</span>
<img src="img/taobao_relation.jpg"/>
</td>
</tr>
<tr id="product1">
<td class="td1">
<input name="check" type="checkbox" />
</td>
<td class="td2">
<img src="img/taobao_cart_01.jpg" class="img1"/>
<ul class="text">
<li>日韩流行风时尚美美独爱拼图金属坡跟<br />公主靴子黑色</li>
<li>颜色：棕色 尺码：37</li>
<li>保障： <img src="img/taobao_icon_01.jpg"/></li>
</ul>
</td>
<td class="td3" id="jf1">5</td>
<td class="td4" id="mon">138.00</td>
<td class="td5">
<img src="img/taobao_minus.jpg" onclick="onclickNum('num1','minus')"/>
<input type="text" id="num1" class="num_input" value="1"/>
<img src="img/taobao_adding.jpg" onclick="onclickNum('num1','add')"/>
</td>
<td class="td6" id="jg"></td>
<td class="td7"><a href="#" class="del">删除</a></td>
</tr>
<!--商品2-->
<tr class="tr2">
<td colspan="7">
店铺：<span class="blue">纤巧百媚时尚鞋坊</span> 卖家：<span class="blue">纤巧百媚</span>
<img src="img/taobao_relation.jpg"/>
</td>
</tr>
<tr id="product2">
<td class="td1">
<input name="check" type="checkbox" />
</td>
<td class="td2">
<img src="img/taobao_cart_02.jpg" class="img1"/>
<ul class="text">
<li>日韩流行风时尚美美独爱拼图金属坡跟<br />公主靴子黑色</li>
<li>颜色：棕色 尺码：37</li>
<li>保障： <img src="img/taobao_icon_01.jpg"/><img src="img/taobao_icon_02.jpg"/></li>
</ul>
</td>
<td class="td3" id="jf2">12</td>
<td class="td4">265.00</td>
<td class="td5">
<img src="img/taobao_minus.jpg" onclick="onclickNum('num2','minus')" />
<input type="text" id="num2" class="num_input" value="1"/>
<img src="img/taobao_adding.jpg" onclick="onclickNum('num2','add')"/>
</td>
<td class="td6" id="jg2"></td>
<td class="td7"><a href="#" class="del">删除</a></td>
</tr> <!--商品3-->
<tr class="tr2">
<td colspan="7">
店铺：<span class="blue">纤巧百媚时尚鞋坊</span> 卖家：<span class="blue">纤巧百媚</span>
<img src="img/taobao_relation.jpg"/>
</td>
</tr>
<tr id="product3">
<td class="td1">
<input name="check" type="checkbox" />
</td>
<td class="td2">
<img src="img/taobao_cart_03.jpg" class="img1"/>
<ul class="text">
<li>日韩流行风时尚美美独爱拼图金属坡跟<br />公主靴子黑色</li>
<li>颜色：棕色 尺码：37</li>
<li>保障： <img src="img/taobao_icon_01.jpg"/></li>
</ul>
</td>
<td class="td3" id="jf3">3</td>
<td class="td4">58.00</td>
<td class="td5">
<img src="img/taobao_minus.jpg" onclick="onclickNum('num3','minus')" />
<input type="text" id="num3" class="num_input" value="1"/>
<img src="img/taobao_adding.jpg" onclick="onclickNum('num3','add')" />
</td>
<td class="td6" id="jg3"></td>
<td class="td7"><a href="#" class="del">删除</a></td>
</tr> <!--商品4-->
<tr class="tr2">
<td colspan="7">
店铺：<span class="blue">纤巧百媚时尚鞋坊</span> 卖家：<span class="blue">纤巧百媚</span>
<img src="img/taobao_relation.jpg"/>
</td>
</tr> <tr id="product4">
<td class="td1">
<input name="check" type="checkbox"/>
</td>
<td class="td2">
<img src="img/taobao_cart_04.jpg" class="img1"/>
<ul class="text">
<li>日韩流行风时尚美美独爱拼图金属坡跟<br />公主靴子黑色</li>
<li>颜色：棕色 尺码：37</li>
<li>保障： <img src="img/taobao_icon_01.jpg"/></li>
</ul>
</td>
<td class="td3" id="jf4">12</td>
<td class="td4">12.00</td>
<td class="td5">
<img src="img/taobao_minus.jpg" onclick="onclickNum('num4','minus')" />
<input type="text" id="num4" class="num_input" value="1"/>
<img src="img/taobao_adding.jpg" onclick="onclickNum('num4','add')" />
</td>
<td class="td6" id="jg4"></td>
<td class="td7"><a href="#" class="del">删除</a></td>
</tr> </table>
<a href="javascript:delAll()">
<img src="img/taobao_del.jpg" alt="delete" id="del"/>
</a> <ul class="foot_rig">
<li>商品总价（不含运费）：<span id="total">0</span>元</p>
<li><p class="li_2">可获得积分<span class="jfsum" id="integral">0</span>点</p></li>
<li class="li_a"><img src="img/taobao_subtn.jpg" class="buy"/></li>
</ul>
</div>
<script src="js/index.js"></script>
</body>
</html>
CSS代码:
*{margin:;padding:;}
.container{width: 1000px;margin: 0 auto;}
a{text-decoration:none;color: #000;}
li{list-style: none;}
.logo{padding-top: 10px;}
.nav{height: 60px;width: 100%;line-height: 60px;font-size: 14px;}
.a{color: #3a68a3;}
/*查看购物车*/
.lookcar{width: 100%;}
.lookcar li{box-sizing:border-box;width: 20%;height: 30px;float: left;line-height: 30px;text-align: center;background: #e4e4e4;position: relative;}
.li_p{float: left;width: 92%;height: 100%;background: #ff6600;}
.san{width:;height:;float:left;border-top: 15px solid transparent;border-left:15px solid #ff6600 ;border-bottom: 15px solid transparent;}
.jianto{position: absolute;height: 100%;right:;}
table{width: 100%;border-collapse:collapse;}
table .tr_top{height: 50px;border-bottom: 4px solid #bac9dc;}
table .tr2{height: 50px;}
table #product1,#product2,#product3,#product4{height: 120px;background: #e2f2ff;}
table .tr3 td{border-right: 1px solid #fff;}
.blue{color: #3A68A3;}
.td1{width: 70px;text-align: center;}
.td2{width: 400px;}
.td3,.td4{width: 100px;text-align: center;}
.td6{width: 100px;text-align: center;color: #FF6600;font-weight: bold;}
.td5{width: 130px;text-align: center;}
.td7{text-align: center;color: #3A68A3;}
.img1{float: left;width: 100px;height: 100px;margin-left: 4px;}
.text{float: left;padding-left: 10px;font-size:14px ;line-height: 24px;}
.text li:first-child{color: #3A68A3;}
.num_input{width: 30px;}
.foot{width: 100%;height: 150px;}
.foot_left{float: left;}
#del{width: 130px;height: 30px;margin-top: 60px;}
.foot_rig{width:300px;float: right;}
.foot_rig li{padding: 10px 0;float: right;}
.li_2{margin-left: 150px;}
.sum,.jfsum{font-size:18px;font-weight: bold; color: #FF6600;}
.delete{color: #3A68A3;}
JS代码:
//全选
function checkAll(){
var inp=document.getElementsByName("check");
var ind=document.getElementById("checkAll");
for(var i of inp){
i.checked=ind.checked;
cpCount();
}
}
//删除一行
var dels = document.getElementsByClassName("del");
for (var x of dels) {
x.onclick = deleteTr;
}
function deleteTr(){
this.parentNode.parentNode.previousSibling.previousSibling.remove()
this.parentNode.parentNode.remove();
cpCount();
}
/*删除选中行的商品*/
var delss=document.getElementById('del'); //获取删除所选的按钮
delss.onclick = function delec(){
var inp=document.getElementsByName("check"); //获取每个多选框
for (var i=inp.length-1;i>=0;i--){
if(inp[i].checked == true){
inp[i].parentNode.parentNode.previousSibling.previousSibling.remove();
inp[i].parentNode.parentNode.remove();
inp.checked = false;
cpCount();
}
}
}
//商品数量
function onclickNum(numId,count){
var numId=document.getElementById(numId);
if(count=="minus"){
if(numId.value<=1){
alert("不能是0");
return false;
}else{
numId.value=parseInt(numId.value)-1;
cpCount();
}
}else{
numId.value=parseInt(numId.value)+1;
cpCount();
}
}
//计算商品的总价和积分总
function cpCount(){
var total=0; //所有商品的总计
var integral=0; //所有商品的积分
var point; //每一行商品的单品积分
var price; //每一行商品的单价
var nums; //每一行商品的数量
var subtotal; //每一行商品的小计
//找出表格中所有的行数
var tableTr=document.getElementById("shopping").getElementsByTagName("tr");
if(tableTr.length>0){
for(var i=1;i<tableTr.length;i++){
if(tableTr[i].getElementsByTagName("td").length>2){ //找到所有行数内的td数量大于2的行数
point=tableTr[i].getElementsByTagName("td")[2].innerHTML; //每一行商品的单品积分
price=tableTr[i].getElementsByTagName("td")[3].innerHTML; //每一行商品的单价
nums=tableTr[i].getElementsByTagName("td")[4].getElementsByTagName("input")[0].value; //每一行商品的数量
integral+=point*nums; //所有商品的积分的和 = 每一行商品的单价积分 x 数量 相加
total+=price*nums; //所有商品的总计的和 = 每一个商品的单价 x 数量 相加
tableTr[i].getElementsByTagName("td")[5].innerHTML=price*nums; //每行商品小计 =商品的单价 x 数量 } }
document.getElementById("total").innerHTML=total;
document.getElementById("integral").innerHTML=integral;
}
}
window.onload=cpCount;
代码中如果有存在的问题希望可以帮我指出哦，当然如果有什么不会的不理解的也可以在下面问我哦~~~~~~祝大家周末愉快
【JavaScript_DOM 淘宝购物车】的更多相关文章
- 淘宝购物车页面 智能搜索框Ajax异步加载数据
如果有朋友对本篇文章的一些知识点不了解的话,可以先阅读此篇文章.在这篇文章中,我大概介绍了一下构建淘宝购物车页面需要的基础知识. 这篇文章主要探讨的是智能搜索框Ajax异步加载数据.jQuery的社区 ...
- 淘宝购物车页面 PC端和移动端实战
最近花了半个月的时间,做了一个淘宝购物车页面的Demo.当然,为了能够更加深入的学习,不仅仅有PC端的固定宽度的布局,还实现了移动端在Media Query为768px以下(也就是实现了ipad,ip ...
- 仿淘宝购物车demo---增加和减少商品数量
在上一篇博客中,小编简单的介绍了如何使用listview来实现购物车,但是仅仅是简单的实现了列表的功能,随之而来一个新的问题,买商品的时候,我们可能不止想买一件商品,想买多个,或许有因为某种原因点错了 ...
- jQuery实现淘宝购物车小组件
我爱撸码,撸码使我感到快乐! 大家好,我是Counter,本章将实现淘宝购物车小组件, 用原生js可以实现吗,当然可以,可是就是任性一回,就是想用jQuery 来实现下.HTML代码不多才4行,CSS ...
- android ------ RecyclerView 模仿淘宝购物车
电商项目中常常有购物车这个功能,做个很多项目了,都有不同的界面,选了一个来讲一下. RecyclerView 模仿淘宝购物车功能(删除选择商品,商品计算,选择, 全选反选,商品数量加减等) 看看效果图 ...
- vue实现淘宝购物车功能
淘宝购物车功能,效果如下图 非常简单的逻辑,没有做代码的封装,代码如下 <div class="list-container"> <div class=" ...
- web——自己实现一个淘宝购物车页面
body, table{font-family: 微软雅黑; font-size: 10pt} table{border-collapse: collapse; border: solid gray; ...
- jquery模拟淘宝购物车
今天要实现的一个功能页面就是利用jquery代码模拟一个淘宝网的购物车结算页面 总体页面效果如图: 首先我们要实现的内容的需求有如下几点: 1.在购物车页面中,当选中“全选”复选框时,所有商品前的复选 ...
- Android仿淘宝购物车demo
夏的热情渐渐退去,秋如期而至,丰收的季节,小编继续着实习之路,走着走着,就走到了购物车,逛过淘宝或者是京东的小伙伴都知道购物车里面的宝贝可不止一件,对于爱购物的姑娘来说,购物车里面的商品恐怕是爆满,添 ...
随机推荐
- 【jQuery入门】(5)---jQuery CSS
jQuery CSS 1.jQuery 文档操作方法 1.addClass() 方法: addClass() 方法向被选元素添加一个或多个类.该方法不会移除已存在的 clas ...
- idea和Webstorm上使用git和github,码云
由于之前一直使用svn,现在项目使用git,顾根据网上找的学习资料,自己梳理了下,收获蛮多,这里做个记录,如果能帮助到您那是最好不过的. 1.大致步骤 使用工具:idea,github,码云 webs ...
- springboot swagger-ui结合
随着移动互联的发展,前后端的分离已经是趋势.前后端已不是传统部门的划分,而是它们各有一套的生态系统,包括不同的开发语言.不同的开发流程.构建方式.测试流程等.做前端的不需要会maven作为构建工具,后 ...
- 浅谈Unix I/O模型
关于I/O模型的文章比较多,参考多篇后理解上仍然不太满意,终需自己整理一次,也是编写高吞吐量高性能网络接口模块的基础.这里所说的主要针对网络I/O,近几年面对越来越大的用户请求量,如何优化这些步骤直接 ...
- Linux：如何进行c++编程
不适应美帝的饮食,当一只咸鱼在apartment里Coding一波,学习学习如何在Ubuntu实现C++的编程 正文如下: (预备知识) 学习Vim: http://www.cnblogs.com/ ...
- Java SE 8 流库（三）
1.7. Optional类型 容器对象,可能包含或不包含非空值.如果存在一个值,isPresent()将返回true,get()将返回值.还提供了依赖于包含值是否存在的附加方法,如orElse()( ...
- php运行C++程序
linux命令:gcc hello.cpp -lstdc++ -o hello.o php代码: <?php $command="./hello.o "; passthru( ...
- ASP.NET Core 一步步搭建个人网站（4）_主页和登录验证
上章节我们已经定制好动态配置的菜单,用户登录网站的第一步就是进入首页内容,那我们先搭建一下我们的首页内容.想着自己的网站内容主要是个人博客类型,所以,首页就展示博主本人的一些基本信息吧,哈哈.当然,做 ...
- 人工智能一：Al学习路线
想要跨入AI的大门,如何跨?终于找到了一套学习方法 努力向你靠近 2017-12-03 07:14:51 当下人工智能领域的发展已经有了燎原之势,麦肯锡全球研究院就认为人工智能促进对社会的转变速度将比 ...
- arm-linux-objdump反汇编使用指南
一. arm-linux-objdump常用来显示二进制文件信息,常用来查看反汇编代码 二. 常用选项: 1.-b bfdname 指定目标码格式 2.-disassemble或者-d 反汇编 ...