javascript 实现购物车页面
跟商城有关系的网站，难免会有购物车的结账界面。
我用javascript实现了增加数量/减少数量,实时计算总金额，删除该商品，选中商品/反选商品/全选/全反选...的操作。
欢迎指点！~
效果如图：
用到的素材：加号 减号 商品图 删除图标 选中的图标和没选中的图标
代码：
<body onselectstart="return false;" style="-moz-user-select:none;">
<table>
<thead>
<tr>
<th><input type="checkbox"></th>
<th>商品信息</th>
<th>数量</th>
<th>单价<span>（元）</span></th>
<th>金额<span>（元）</span></th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>
<img src="./cart/good.png">
<p>小呀小苹果（一）</p>
</td>
<td><span class="add"></span><span class="num">3</span><span class="dec"></span></td>
<td class="per">￥<span>1900</span></td>
<td class="money">￥<span>3800</span></td>
<td><a class="del"></a></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>
<img src="./cart/good.png">
<p>小呀小苹果（二）</p>
</td>
<td><span class="add"></span><span class="num">3</span><span class="dec"></span></td>
<td class="per">￥<span>1900</span></td>
<td class="money">￥<span>3800</span></td>
<td><a class="del"></a></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>
<img src="./cart/good.png">
<p>小呀小苹果（三）</p>
</td>
<td><span class="add"></span><span class="num">3</span><span class="dec"></span></td>
<td class="per">￥<span>1900</span></td>
<td class="money">￥<span>3800</span></td>
<td><a class="del"></a></td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td>已选：<span class="choosen">0</span>件 共<span class="total">0</span>元</td>
<td></td>
<td></td>
<td></td>
<td><button class="sure">结账</button></td>
</tr>
</tfoot>
</table>
</body>
*{ margin: 0;padding: 0;list-style: none;font-size: 16px;font-family: 'arial';font-weight: normal; }
table{ width: 1020px;margin: 0 auto;border: 1px solid gray;margin-top: 30px;border-collapse: collapse;text-align: center; }
table tr{ height: 100px;line-height: 100px; }
thead{ background: black;color: white; }
thead tr,tfoot tr{ height: 40px;line-height: 40px; }
table img{ float: left;width: 65px;height: 65px;margin-top: 18px; }
table input[type="checkbox"]{ width: 32px;height: 32px;-webkit-appearance: none;background: url(./cart/checkbox.png) no-repeat center center;vertical-align:middle }
tbody td:nth-child(1){ width: 7%; }
tbody td:nth-child(2){ width: 35%; }
tbody td:nth-child(3){ width: 13%; }
tbody td:nth-child(4){ width: 15%; }
tbody td:nth-child(5){ width: 15%; }
tbody td:nth-child(6){ width: 15%; }
tbody tr{ border-bottom: 1px solid black; }
table .add,table .dec,table .del{ display: inline-block;width: 14px;height: 21px;cursor: pointer; }
table .add{ background: url(./cart/add.png) no-repeat center center; }
table .dec{ background: url(./cart/dec.png) no-repeat center center; }
table .num{ display: inline-block;width: 57px;margin: 0 18px;height: 39px;line-height: 39px;border: 1px solid #b0b0b0;background: #d4d4d4; }
table .del{ width: 18px;background: url(./cart/del.png) no-repeat; }
table .money,table .total{ color: red; }
table .choosen{ color: #3083ff; }
table .sure{ width: 100%;height: 100%;background: #3083ff;color: #fff;border: none;cursor: pointer; }
input[type='checkbox']:checked{ background: url(./cart/check.png) no-repeat center center; }
window.onload = function(){
// 按顺序为：list个数 加 数量 减 删 选择框 金额 单价 选中的个数
// list个数 不包括thead
var oListNumber = document.getElementsByClassName('add').length;
var oAdds = document.getElementsByClassName('add');
var oNums = document.getElementsByClassName('num');
var oDecs = document.getElementsByClassName('dec');
var oDels = document.getElementsByClassName('del');
var oInputs = document.getElementsByTagName('input');
var oMoneys = document.getElementsByClassName('money');
var oPers = document.getElementsByClassName('per');
var oAllChecked = false; //全选
var othercheckbox =0; //除了全选以外的其他checkbox
changeMoney();
// checkbox点击事件
for(var i =0;i<oInputs.length;i++){
(function(i){
oInputs[i].onclick = function(){
// 判断除了全选以外的checkbox
if(i!=0){
if(oInputs[i].checked ==true){
othercheckbox++
}else{
othercheckbox--
}
}
// 判断是否全选
if(othercheckbox == oListNumber){
oInputs[0].checked = true;
}else{
oInputs[0].checked = false;
}
// 判断是否选择了全选checkbox
if(i==0){
oAllChecked = !oAllChecked;
for(var j=0;j<oInputs.length;j++){
oInputs[j].checked=oAllChecked;
}
if(oAllChecked){
othercheckbox = oListNumber
}else{
othercheckbox = 0;
}
}
changeTotal()
}
})(i)
}
// add事件
for(var i =0;i<oAdds.length;i++){
(function(i){
oAdds[i].onclick = function(){
oNums[i].innerText = parseInt(oNums[i].innerText) +1;
changeMoney()
changeTotal()
}
})(i)
}
// dec事件
for(var i =0;i<oDecs.length;i++){
(function(i){
oDecs[i].onclick = function(){
if(oNums[i].innerText != '0'){
oNums[i].innerText = parseInt(oNums[i].innerText) -1;
}
changeMoney()
changeTotal()
}
})(i)
}
// add事件和dec事件伴随的金额改变事件
function changeMoney(){
var oPerSpan =[]; //单价
var oMoneySpan=[]; //金额
for(var i=0;i<oListNumber;i++){
oPerSpan[i] = oPers[i].getElementsByTagName('span')[0].innerText;
oMoneySpan[i] = oMoneys[i].getElementsByTagName('span')[0];
oMoneySpan[i].innerText = (parseInt(oNums[i].innerText)*parseInt(oPerSpan[i]))
}
}
// del事件
for(var i =0;i<oDels.length;i++){
(function(i){
oDels[i].onclick = function(){
var thisdom = oDels[i].parentNode.parentNode;
var tbody = thisdom.parentNode;
tbody.removeChild(thisdom)
changeTotal()
}
})(i)
}
// 总数量 总金额
function changeTotal(){
var oChoosen = document.getElementsByClassName('choosen')[0];
var oTotal = document.getElementsByClassName('total')[0];
var sumNUM = 0
var sumTOTAL =0
for(var i=1;i<oInputs.length;i++){
if(oInputs[i].checked){
sumNUM = parseInt(oNums[i-1].innerText) + parseInt(sumNUM);
sumTOTAL = parseInt(oMoneys[i-1].getElementsByTagName('span')[0].innerText) +parseInt(sumTOTAL)
}
}
oChoosen.innerText = sumNUM;
oTotal.innerText = sumTOTAL;
}
}
javascript 实现购物车页面的更多相关文章
- 淘宝购物车页面 智能搜索框Ajax异步加载数据
如果有朋友对本篇文章的一些知识点不了解的话,可以先阅读此篇文章.在这篇文章中,我大概介绍了一下构建淘宝购物车页面需要的基础知识. 这篇文章主要探讨的是智能搜索框Ajax异步加载数据.jQuery的社区 ...
- FineUI小技巧（1）简单的购物车页面
起因 最初是一位 FineUI 网友对购物车功能的需求,需要根据产品单价和数量来计算所有选中商品的总价. 这个逻辑最好在前台使用JavaScript实现,如果把这个逻辑移动到后台C#实现,则会导致过多 ...
- 前端Vue项目——购物车页面
一.加入购物车的两种策略 1.加入购物车接口 在 src/restful/api.js 中写入添加购物车接口: // 加入购物车的接口 export const shopCart = (params) ...
- 利用 jQuery 操作页面元素的方法，实现电商网站购物车页面商品数量的增加和减少操作，要求单项价格和总价随着数量的改变而改变
查看本章节 查看作业目录 需求说明: 利用 jQuery 操作页面元素的方法,实现电商网站购物车页面商品数量的增加和减少操作,要求单项价格和总价随着数量的改变而改变 当用户单击"+" ...
- 淘宝购物车页面 PC端和移动端实战
最近花了半个月的时间,做了一个淘宝购物车页面的Demo.当然,为了能够更加深入的学习,不仅仅有PC端的固定宽度的布局,还实现了移动端在Media Query为768px以下(也就是实现了ipad,ip ...
- javascript实现当前页面截屏
javascript实现当前页面截屏 一.前言 有客户要求能对用户当前页面进行指定区域截屏,类似qq截屏的实现效果.比如用户在处理工作的时候,将当前页面录入后的一些信息进行截图下载保存.但又不能安装任 ...
- 使用javascript实现html页面直接下载网盘文件
公司新建一网站,用的是商派的易开店系统.设计方案中有一个是下载文件的功能,但易开店不支持上传资源,所以无法下载本站资源. 于是想到了网盘资源下载,有些网站是把页面链接到网盘资源文件下载页面,进行二次跳 ...
- html5与js关于input[type='text']文本框value改变触发事件一些属性的区别oninput,onpropertychange,onchange和文本框的value点击全选状态onclick="select();"。做购物车页面时会要用到。
关于input[type='text']文本框value改变触发事件一些属性的区别oninput,onpropertychange,onchange和文本框的点击全选状态onclick="s ...
- HTML里的哪一部分Javascript 会在页面加载的时候被执行？
最近遇到一个问题:HTML里的哪一部分Javascript 会在页面加载的时候被执行()A : 文件头部 B : 文件尾 C : <head>标签部分 D : <body>标签 ...
随机推荐
- NO1——线段树
/* 数组存储 */ /* 预处理 */ #include <iostream> #include <cstdio> #include <algorithm> #i ...
- NHibernate3.3.3 学习笔记1
前言 昨天在园友的介绍下,我找了一本学习NHibernate的书:<NHibernate 3 Beginner’s Guide>. 第一章我直接跳过了,因为是英文版的看起来很吃力,且第一章 ...
- arm单板上移植gdb
虚拟机 : vmware 12 image: ubuntukylin 14.04.1 系统版本:Linux dancy 3.13.0-32-generic #57-Ubuntu SMP Tue Jul ...
- 猜数字(C语言版)
编程先由计算机“想”一个1到100之间的数请人猜,如果人猜对了,则结束游戏,并在屏幕上输出人猜了多少次才猜对此数,以此来反映猜数者“猜”的水平,否则计算机给出提示,告诉人所猜的数是太大还是太小,最多可 ...
- Codeforces Round #383 (Div. 1) C(二分图)
一道很巧妙的二分图的题目 简单分析性质可知,一个合法序列一定是由12,21这样的子串构成的,所以相邻的每隔2个两两配对 然后BF和GF互相配对,思考一下,如果存在奇环,那么必定有一个BG有两个GF,或 ...
- 【题解】HNOI2016树
大概最近写的这些题目都是仿生的代码……在这里先说明一下.可能比起做题记录来说更加像是学习笔记吧.之所以这样做主要还是因为感受到最近做的很多题目自己会做的都比较简单,不会做的又不敢触及,虽然也有所进步. ...
- [CF1076E]Vasya and a Tree
题目大意:给定一棵以$1$为根的树,$m$次操作,第$i$次为对以$v_i$为根的深度小于等于$d_i$的子树的所有节点权值加$x_i$.最后输出每个节点的值 题解:可以把操作离线,每次开始遍历到一个 ...
- 【BZOJ 3316】JC loves Mkk 01分数规划+单调队列
单调栈不断吞入数据维护最值,数据具有单调性但不保证位置为其排名,同时可以按照进入顺序找出临近较值单调队列队列两端均可删除数据但只有队末可以加入数据,仍然不断吞入数据但同时可以额外刨除一些不符合条件的数 ...
- Android tips tool 发现的性能问题（转载翻译）
先翻译刚好在研究到的一段,其余的无限期待续. 1.ObsoleteLayoutParam不起作用的标签 Invalid layout param in a LinearLayout: layout_c ...
- [Usaco2005 Dec]Cleaning Shifts 清理牛棚 (DP优化/线段树)
[Usaco2005 Dec] Cleaning Shifts 清理牛棚 题目描述 Farmer John's cows, pampered since birth, have reached new ...