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>标签 ...
随机推荐
- apollo命令行传入参数
Java apollo客户端运行配置 需要在META-INF中创建app.properties文件,以配置app.id 还需要在/opt/settings/server.properties或C:/o ...
- BZOJ 4276 [ONTAK2015]Bajtman i Okrągły Robin 费用流+线段树优化建图
Description 有n个强盗,其中第i个强盗会在[a[i],a[i]+1],[a[i]+1,a[i]+2],...,[b[i]-1,b[i]]这么多段长度为1时间中选出一个时间进行抢劫,并计划抢 ...
- python完成简单购物功能
# # -*- coding: utf8 -*- # # Author:wxq # # date:2017/11/13 # # python 3.6 # 创建一个商品列表: product_lis = ...
- iOS版微信开发小结（微信支付，APP跳转微信公众号）
最近公司心血来潮,一心要搞微信.废话不多说,直接上干货. 开发前准备: 1.在微信开发者平台获取开发者认证:(一年300元人民币) PS:具体流程按照微信流程指示操作即可,在这就不废话了. 2.下载微 ...
- 【EasyNetQ】- 基于topic的路由
RabbitMQ具有非常酷的功能,基于主题的路由,允许订户根据多个标准过滤消息.主题是由与消息一起发布的点分隔的单词列表.例如,“stock.usd.nyse”或“book.uk.london”或“a ...
- Java进阶
Java进阶(一)Annotation(注解) Java进阶(二)当我们说线程安全时,到底在说什么 Java进阶(三)多线程开发关键技术 Java进阶(四)线程间通信方式对比 Java进阶(五)NIO ...
- SpringBoot 入门学习（HelloWord）
前置知识 1.会利用 maven 构建项目 2.了解 Spring 注解 3.了解 RESTful API 的基本理论 4.SpringBoot 是 SpringMVC 的升级版,但两者没有必然的联系 ...
- 解决微信小程序配置https不成功问题
拿到一个微信小程序的项目,需要配置https安全链接(为什么必须使用https不再赘述),预想这个已经很成熟的流程,应该不会有太大问题,结果还真是出乎意料,竟然掉进一个大坑,折腾好久. 申请证书配置的 ...
- javascript prototype原型链的原理
javascript prototype原型链的原理 说到prototype,就不得不先说下new的过程. 我们先看看这样一段代码: <script type="text/javasc ...
- [luogu2617]Dynamic Rankings
题面在这里 description 动态区间第\(k\)大 data range \[n,m\le 10000,a_i,t\le 1e^9\] solution 前置技能:主席树,静态区间第\(k\) ...