【DOM练习】淘宝购物车
HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/css.css" />
</head>
<body>
<div id="container">
<img src="img/taobao_logo.gif"/>
<ul id="weizhi">
<li>您的位置:</li>
<li>首页</li>
<li>></li>
<li>我的淘宝</li>
<li>></li>
<li>我的购物车</li>
</ul> <ul id="liuCheng">
<li>1.查看购物车<div class="fang he"></div></li>
<li>2.确认订单信息<div class="fang"></div></li>
<li>3.收款到支付宝<div class="fang"></div></li>
<li>4.确认收货<div class="fang"></div></li>
<li>5.评价</li>
</ul> <table border="0" cellspacing="1" cellpadding="0" id="table">
<tr>
<td><input type="checkbox" id="all"/><label for="all">全选</label></td>
<td>店铺宝贝</td>
<td>获积分</td>
<td>单价（元）</td>
<td>数量</td>
<td>小计</td>
<td>操作</td>
</tr> <tr class="top_hang"><td colspan="5" >店铺：<font>纤巧百媚时尚鞋坊</font> 卖家：<font>纤巧百媚</font><img src="img/taobao_relation.jpg"></td></tr>
<tr class="hang">
<td><input type="checkbox" class="box"/></td>
<td><img src="img/taobao_cart_01.jpg"><p>日韩流行时尚风格独特单季度房价的精神的靴子黑色红色阿斯飞洒d实打实的技术的房价</p><span>颜色：棕色 尺寸：37</span><span>保障：<img src="img/taobao_icon_01.jpg" alt="" /></span></td>
<td><b>5</b></td>
<td class="danJia">138.00</td>
<td><img src="img/taobao_minus.jpg" class="Button_jian"><input type="number" min="1" value="1" class="number" readonly="readonly"/><img src="img/taobao_adding.jpg" class="Button_jia"/></td>
<td class="xiaoJi">552</td>
<td><a>删除</a></td>
</tr> <tr class="top_hang"><td colspan="5" >店铺：<font>纤巧百媚时尚鞋坊</font> 卖家：<font>纤巧百媚</font><img src="img/taobao_relation.jpg"></td></tr>
<tr class="hang">
<td><input type="checkbox" class="box"/></td>
<td><img src="img/taobao_cart_01.jpg"><p>日韩流行时尚风格独特单季度房价的精神的靴子黑色红色阿斯飞洒d实打实的技术的房价</p><span>颜色：棕色 尺寸：37</span><span>保障：<img src="img/taobao_icon_01.jpg" alt="" /></span></td>
<td><b>5</b></td>
<td class="danJia">938.00</td>
<td><img src="img/taobao_minus.jpg" class="Button_jian"><input type="number" min="1" value="2" class="number" readonly="readonly"/><img src="img/taobao_adding.jpg" class="Button_jia"/></td>
<td class="xiaoJi">552</td>
<td><a>删除</a></td>
</tr> <tr class="top_hang"><td colspan="5" >店铺：<font>纤巧百媚时尚鞋坊</font> 卖家：<font>纤巧百媚</font><img src="img/taobao_relation.jpg"></td></tr>
<tr class="hang">
<td><input type="checkbox" class="box"/></td>
<td><img src="img/taobao_cart_01.jpg"><p>日韩流行时尚风格独特单季度房价的精神的靴子黑色红色阿斯飞洒d实打实的技术的房价</p><span>颜色：棕色 尺寸：37</span><span>保障：<img src="img/taobao_icon_01.jpg" alt="" /></span></td>
<td><b>5</b></td>
<td class="danJia">638.00</td>
<td><img src="img/taobao_minus.jpg" class="Button_jian"><input type="number" min="1" value="2" class="number" readonly="readonly"/><img src="img/taobao_adding.jpg" class="Button_jia"/></td>
<td class="xiaoJi">552</td>
<td><a>删除</a></td>
</tr> <tr class="top_hang"><td colspan="5" >店铺：<font>纤巧百媚时尚鞋坊</font> 卖家：<font>纤巧百媚</font><img src="img/taobao_relation.jpg"></td></tr>
<tr class="hang">
<td><input type="checkbox" class="box"/></td>
<td><img src="img/taobao_cart_01.jpg"><p>日韩流行时尚风格独特单季度房价的精神的靴子黑色红色阿斯飞洒d实打实的技术的房价</p><span>颜色：棕色 尺寸：37</span><span>保障：<img src="img/taobao_icon_01.jpg" alt="" /></span></td>
<td><b>5</b></td>
<td class="danJia">538.00</td>
<td><img src="img/taobao_minus.jpg" class="Button_jian"><input type="number" min="1" value="3" class="number" readonly="readonly"/><img src="img/taobao_adding.jpg" class="Button_jia"/></td>
<td class="xiaoJi">552</td>
<td><a>删除</a></td>
</tr> </table> <span id="zong">商品总价（不含运费）：<font id="qian">1349</font>元</span>
<button id="shanChu">删除所选</button><br />
<span id="fen">可获积分：<font id="dian">65</font>点</span><br />
<img src="img/taobao_subtn.jpg" alt="" id="gouMai" onclick="javascript:alert('瞎点啥！你有钱似地')"/>
</div> <script type="text/javascript" src="js/js.js" ></script>
</body>
</html>
CSS：
*{margin:0 auto;padding:0;list-style: none;}
body{width:1200px;background:#fff}
#container{background:#fff;height:200px;padding-top:10px}
#weizhi{display:block}
#weizhi li{float:left;font-size:14px;margin-top:20px;}
#weizhi li:nth-child(2){color: blue;}
#weizhi li:nth-child(4){color: blue;}
#liuCheng{display:block;margin-top:40px;background: #FF6600;display: inline-block;border-radius:5px}
#liuCheng li{ float: left; width: 240px;height: 40px;text-align:center;box-sizing:border-box;padding-top:8px;font-size: 18px;background: #FF6600;color: #fff;font-weight:600}
#liuCheng li+li{background: #bbb;color: #000;font-weight:600}
.fang{display: inline-block;width: 27px;height:27px;float:right;transform:rotate(45deg);margin-right:-15px;margin-top: -3px;border-top:4px solid #fff;border-right:4px solid #fff;background:#bbb;}
.he{display: inline-block;width: 27px;height:27px;float:right;transform:rotate(45deg);margin-right:-15px;margin-top: -3px;border-top:4px solid #fff;border-right:4px solid #fff;background:#FF6600;}
#liuCheng li:nth-last-child{border-radius:5px}
#table {text-align:center;margin-top:6px;}
#table tr{border-bottom:4px solid #B2CAF5;height: 30px;width: 100%;;display:inline-block;font-size:14px}
#table tr td:nth-child(1){width: 50px;}
#table tr td:nth-child(2){width: 520px;}
#table tr td:nth-child(3){width: 120px;}
#table tr td:nth-child(4){width: 120px;}
#table tr td:nth-child(5){width: 170px;}
#table tr td:nth-child(6){width: 120px;}
#table tr td:nth-child(7){width: 100px;}
.top_hang{width: 100%;height: 20px; border:0px !important;text-align:left}
.top_hang>td:nth-child(1){width:500px !important;height: 20px;padding-top:2px;box-sizing:border-box}
.top_hang>td>font{color: #3F6791;margin-left: 4px;margin-right: 4px;}
.top_hang td img{display:inline-block;margin-bottom: -6px;}
.hang{width: 100%;height: 120px !important; border:0px !important;}
.hang td{border:2px solid #E2F2FF;height:110px;box-sizing:border-box;background:#E2F2FF;padding:8px;position: relative;}
.hang td img{float:left;margin-right:20px}
.hang td p{float:left;width:360px;text-align: left;color:#357198;font-size:13px;margin-top:-5px;line-height:21px}
.hang td span{float:left;width:360px;text-align: left;color:#000;font-size:13px;margin-top:2px}
.hang td span img{float: none;}
.number{width: 30px;text-align: center;}
.Button_jia{float: none !important;position: absolute;right:30px;top:50px;}
.Button_jian{float: none !important;position: absolute;left:48px;top:50px;}
.Button_jia,.Button_jian,a:hover{cursor:pointer}
.xiaoJi{font-size:17px;font-weight:700;color:#EB5A14}
.hang td a{color:#357198;text-decoration: none;}
#zong{float:right;font-size:15px}
#qian{font-size:24px;font-weight:700;color:#EB5A14}
#shanChu{margin-top:40px}
#fen{float: right;display: inline;height:20px}
#gouMai{float: right;margin-top: 20px;}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
input[type="number"]{
-moz-appearance: textfield;
}
JS：
xiaoji();
//减号选择0
var jianhao_arr=document.querySelectorAll(".Button_jian")
for(var x of jianhao_arr){
x.addEventListener("click",function(){
var zhi=this.nextSibling.value; if(zhi-1==0){
alert("没点儿b数？");
}else{
this.nextSibling.value=zhi-1
}
xiaoji();
})
} //加号
var jiahao_arr=document.querySelectorAll(".Button_jia")
for(var x of jiahao_arr){
x.addEventListener("click",function(){
var zhi=this.previousSibling.value;
this.previousSibling.value=1+parseInt(zhi);
xiaoji();
})
} //全选
var all=document.querySelector("#all");
var meige=document.querySelectorAll(".box") all.onclick=function xuanZe(){
for(var i of meige){
i.checked=all.checked
}
} //删除
var a=document.querySelectorAll("a")
for(var a of a){
a.addEventListener("click",function(){
this.parentNode.parentNode.previousSibling.previousSibling.remove()
this.parentNode.parentNode.remove();
xiaoji();
})
} //小计
function xiaoji(){
var xiaoji=document.querySelectorAll(".xiaoJi") //小ji标签!
var danjia=document.querySelectorAll(".danJia") //单价标签!
for(var x=0;x<danjia.length;x++){
var zhi=danjia[x].nextSibling.nextSibling.children[1].value;
xiaoji[x].innerText=parseInt(danjia[x].innerHTML)*parseInt(zhi)
}
jiFen();
zong(xiaoji);
} //总计
function zong(xiaoji2){//小ji标签!
var arr=[];
if(xiaoji2.length==0){document.querySelector("#qian").innerHTML=0}
for(x of xiaoji2){
arr.push(x.innerHTML);
var he=arr.reduce(function(x,y){return parseInt(x)+parseInt(y);})
document.querySelector("#qian").innerHTML=he;
}
} //删除所有按钮
var btn=document.querySelector("#shanChu");
btn.onclick=function(){
var box=document.querySelectorAll(".box");
for(x of box){
if(x.checked==true){
x.parentNode.parentNode.previousSibling.previousSibling.remove()
x.parentNode.parentNode.remove();
xiaoji();
}
}
} //每个积分
function jiFen(){
var jifen=5;
var b=document.querySelectorAll("b");
for(x of b){
var num=x.parentNode.nextSibling.nextSibling.nextSibling.nextSibling.children[1].value;
console.log(num)
var ge=jifen*num;
x.innerText=ge;
}
zongJiFen(b);
} //总积分
function zongJiFen(b){
var arr=[];
if(b.length==0){document.querySelector("#dian").innerHTML=0}
for(x of b){
arr.push(x.innerHTML);
var he=arr.reduce(function(x,y){return parseInt(x)+parseInt(y);})
document.querySelector("#dian").innerHTML=he;
}
}
【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.在购物车页面中,当选中“全选”复选框时,所有商品前的复选 ...
- 【JavaScript_DOM 淘宝购物车】
让我们一起看一下淘宝的购物车是怎么做的吧,刚刚入门的我可能很多地方的用法都不够优化,不过个人感觉先把逻辑清晰之后再做的话其实也并不难哦, 以下是我做的页面代码: HTML代码: <!DOCTYP ...
随机推荐
- 【树状数组】区间出现偶数次数的异或和（区间不同数的异或和）@ codeforce 703 D
[树状数组]区间出现偶数次数的异或和(区间不同数的异或和)@ codeforce 703 D PROBLEM 题目描述 初始给定n个卡片拍成一排,其中第i个卡片上的数为x[i]. 有q个询问,每次询问 ...
- 20181207_Second_小结
1. 上下 200*200 盒子的重叠,切记用 absolute 绝对定位 为最佳解决方案 2. 移动端多使用 粘连布局 <!DOCTYPE html> <html> < ...
- (50)Wangdao.com第七天_JavaScript 发展与简介
一个完整的JavaScript 应该由以下三部分组成: ECMAScript DOM,全称Browser Object Model,即浏览器对象模型,主要处理浏览器窗口和框架 BOM,全称Docume ...
- C语言面试题分类->位运算
1.不用临时变量交换两个整数. a = a ^ b; b = a ^ b; a = a ^ b; 2.实现一个函数,输入一个整数,输出该数二进制表示中1的个数.例如9的二进制是1001,则输出2. i ...
- 使用Eclipse+jlink调试STM32
使用Eclipse+JLINK调试STM32 安装eclipse + CDT. 安装交叉编译工具(工具链ARM CROSS GCC--GUN ARM http://gnuarmeclipse.sour ...
- LeetCode 50 - Pow(x, n) - [快速幂]
实现 pow(x, n) ,即计算 x 的 n 次幂函数. 示例 1: 输入: 2.00000, 10输出: 1024.00000 示例 2: 输入: 2.10000, 3输出: 9.26100 示例 ...
- java第二次作业之一
package dama; public class person { private String name; private String sex; private int age; privat ...
- LVS，Keepalived,HAproxy区别与联系
LVS,Keepalived,HAproxy区别与联系 LVS 全称Linux Virtual Server,也就是Linux虚拟服务器,由章文嵩(现就职于于淘宝,正因为如此才出现了后来的fullna ...
- win10下配置默认软件（转）
add by zhj: 以配置默认浏览器为例说明,配置其它程序类似 原文:https://blog.csdn.net/u013246898/article/details/52032567 第一步:在 ...
- Mysql查询报错：Illegal mix of collations (gbk_chinese_ci,IMPLICIT) and (utf8_general_ci,COERCIBLE) for operation '='
使用sql别名关联查询的时候,由于字符集冲突导致该错误 解决方案,查询的时候强制转换字符集类型 case when column = '' then _gbk '' collate gbk_chine ...