【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 ...
随机推荐
- 基于jQuery实现点击列表加载更多效果
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> < ...
- ECMA Script 6_symbol(symbol.iterator) 新接口_iterator接口
iterator 接口 只要部署了 iterator 接口 symbol(symbol.iterator), 则可以进行 for...of 遍历
- 浅谈vue性能优化
基础优化 所谓的基础优化是任何 web 项目都要做的,并且是问题的根源.HTML,CSS,JS 是第一步要优化的点 分别对应到 .vue 文件内的,<template>,<style ...
- 根据屏幕自适应宽度：@media
@media screen and (min-width: 1490px){ .w1224{ width: 1400px !important; }}@media screen and (max-wi ...
- javascript基础常识了解一下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Python函数中的列表
在看21天的Python书中写出了一个陷阱,但没给出解释,以下为代码陷阱
- 总结-shell脚本
执行脚本从 svn 检出项目 vi ace.sh #!/bin/bash svn export svn://127.0.0.1/ace/demo /ace/demo 设置脚本可执行 chmod +x ...
- PAT甲级1078 Hashing【hash】
题目:https://pintia.cn/problem-sets/994805342720868352/problems/994805389634158592 题意: 给定哈希表的大小和n个数,使用 ...
- mysql 编码问题
有时候insert数据的时候,会报以下异常: ERROR 1366 (HY000): Incorrect string value: '\xE6\x9D\x83\xE9\x99\x90...' for ...
- jQuery实现图片懒加载
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...