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>标签 ...
随机推荐
- ECharts 上传图片Example
前端 1.为ECharts准备一个div <div id="main" style="Height:400px"></div> 2.引入 ...
- [leetcode-652-Find Duplicate Subtrees]
Given a binary tree, return all duplicate subtrees. For each kind of duplicate subtrees, you only ne ...
- C++STL——概述
一.相关介绍 STL 标准模板库 在编写代码的过程中有一些程序经常会被用到,而且需求特别稳定,所以C++中把这些常用的模板做了统一的规范,慢慢的就形成了STL 提供三种类型的组件: 容器.迭代器和算法 ...
- 软件工程项目组Z.XML会议记录 2013/09/18
软件工程项目组Z.XML会议记录 [例会时间]2013年9月18日周三21:00-23:00 [例会形式]小组讨论 [例会地点]三号公寓楼会客厅 [例会主持]李孟 [会议记录]毛宇 会议整体流程 一. ...
- vue里的this
vue中methods对象里的函数, this指向的都是当前实例或者组件.
- 全局 Ajax 事件处理器
jQuery中将Ajax请求和响应分成了若干(5)个阶段 并且允许开发者在Ajax请求和响应的不同阶处理不同的逻辑, 这些方法用于注册事件处理器,用来处理页面上的任何 Ajax 请求,当某些事件触发后 ...
- require.js 模块化
什么是模块化? 将若干功能进行封装,以备将来被重复使用. 为什么要前端模块化? 将公共功能进行封装实现复用 灵活解决依赖 解决全局变量污染 如何实现前端模块化? <!DOCTYPE html&g ...
- 【题解】WC2008游览计划
写的第一道斯坦纳树的题目.斯坦纳树在信息学中的应用一般为:在\(n\)个点之间给定\(k\)条边并相应的边权,求在保证给定\(m\)个点联通的条件下的最小边权和.解决此类问题的方法即为SPFA + 状 ...
- git使用笔记（二）分支与合并
By francis_hao Nov 18,2016 查看分支,* 表示当前所在分支 $ git branch 查看分支和最后一次提交记录 $ git branch -v 新建分支 $ git ...
- IOI1998 Polygon [区间dp]
[IOI1998]Polygon 题意翻译 题目可能有些许修改,但大意一致 多边形是一个玩家在一个有n个顶点的多边形上的游戏,如图所示,其中n＝4.每个顶点用整数标记,每个边用符号+(加)或符号*(乘 ...