JavaScript实现购物车案例
本文实例为大家分享了JavaScript实现购物车功能的具体代码，供大家参考，具体内容如下
HTML结构
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./css/02-reset.css"> <link rel="stylesheet" href="./css/style.css"> </head> <body> <!-- 简单写个大盒子分大三栏 --> <div class="cart"> <!-- 购物车头部 --> <div class="cart-head clearfix"> <div class="col col-check u-l"> <input type="checkbox" id="all" class="check"> <label for="all">全选</label> </div> <div class="col col-img u-l"> </div> <div class="col col-name u-l">商品名称</div> <div class="col col-price u-l">单价</div> <div class="col col-num u-l">数量</div> <div class="col col-sum u-l">小计</div> <div class="col col-action u-r">操作</div> </div> <!-- 购物车列表 --> <div class="cart-list"> <!-- 商品块 --> <div class="list-item"> <div class="item-box "> <div class="col col-check u-l"> <input type="checkbox" class="check single"> </div> <div class="col col-img u-l"> <img src="./images/1.jpg" alt=""> </div> <div class="col col-name u-l">8848 移动版 4GB+64GB 千峰蓝</div> <div class="col col-price u-l">8888元</div> <div class="col col-num u-l "> <div class="change-goods-num"> <a href="javascript:;" class="jianhao">-</a> <input type="text" value="1"> <a href="javascript:;" class="jiahao">+</a> </div> </div> <div class="col col-sum u-l">8888元</div> <div class="col col-action u-r">删除</div> </div> <div class="item-box "> <div class="col col-check u-l"> <input type="checkbox" class="check single"> </div> <div class="col col-img u-l"> <img src="./images/1.jpg" alt=""> </div> <div class="col col-name u-l">8848 移动版 4GB+64GB 千峰蓝</div> <div class="col col-price u-l">8888元</div> <div class="col col-num u-l "> <div class="change-goods-num"> <a href="javascript:;" class="jianhao">-</a> <input type="text " value="1"> <a href="javascript:;" class="jiahao">+</a> </div> </div> <div class="col col-sum u-l">8888元</div> <div class="col col-action u-r">删除</div> </div> <div class="item-box "> <div class="col col-check u-l"> <input type="checkbox" class="check single"> </div> <div class="col col-img u-l"> <img src="./images/1.jpg" alt=""> </div> <div class="col col-name u-l">8848 移动版 4GB+64GB 千峰蓝</div> <div class="col col-price u-l">8888元</div> <div class="col col-num u-l "> <div class="change-goods-num"> <a href="javascript:;" class="jianhao">-</a> <input type="text" value="1"> <a href="javascript:;" class="jiahao">+</a> </div> </div> <div class="col col-sum u-l">8888元</div> <div class="col col-action u-r">删除</div> </div> <div class="item-box "> <div class="col col-check u-l"> <input type="checkbox" class="check single"> </div> <div class="col col-img u-l"> <img src="./images/1.jpg" alt=""> </div> <div class="col col-name u-l">8848 移动版 4GB+64GB 千峰蓝</div> <div class="col col-price u-l">8888元</div> <div class="col col-num u-l "> <div class="change-goods-num"> <a href="javascript:;" class="jianhao">-</a> <input type="text" value="1"> <a href="javascript:;" class="jiahao">+</a> </div> </div> <div class="col col-sum u-l">8888元</div> <div class="col col-action u-r">删除</div> </div> </div> </div> <!-- 购物车底部 --> <div class="cart-foot"> <div class="section-left u-l"> <a href="">继续购物</a> <span>已选择 <i id="totalNum">0</i> 件商品</span> </div> <div class="u-r settlement">去结算</div> <div class="u-r total-price">合计： <em id="totalPrice">0</em>元</div> </div> </div> <script type="text/javascript" src="./js/script.js"></script> </body> </html>
css结构
/* 浏览器和标签都有默认的样式 清除默认样式 */
*{
margin: 0;padding: 0
}
/* 清除加粗标签的默认样式 */
b,strong{
font-weight: normal
}
/* 清除倾斜标签的默认样式 */
i,em{
font-style: normal
}
/* 清除默认下划线 */
a,u{
text-decoration: none
}
/* 超链接默认颜色为黑色 */
a{
color: #000;
}
/* 清除列表的默认符号样式 */
ul,ol,li{
list-style: none
}
/* 左浮动 */
.u-l{
float: left;
}
/* 右浮动 */
.u-r{
float: right;
}
/* 清除浮动 */
.clearfix{
clear: both;
}
.cart{
margin:0 auto;
width: 1200px;
}
/* 购物车头部样式 */
.cart-head{
height: 70px;
line-height: 70px;
}
.col{
width: 120px;
}
.col-img img{
width: 100px;
height: 100px;
}
.col-name{
width: 380px;
}
.col-price{
width: 160px;
padding-right: 18px;
}
.col-num{
width: 150px;
text-align: center;
}
.col-sum{
text-align: center;
color: #ff6700;
}
.col-active{
text-align: center;
}
/* 购物车商品样式 */
.item-box{
overflow: hidden;
padding: 20px 0;
border-top: 1px solid #ccc;
}
.change-goods-num{
width: 148px;
height: 38px;
border: 1px solid #000;
}
.change-goods-num a{
float: left;
width: 38px;
height: 38px;
line-height: 38px;
font-size: 20px;
color: #000;
text-align: center;
}
.change-goods-num input{
float: left;
width: 72px;
height: 38px;
font-size: 18px;
line-height: 38px;
text-align: center;
border-width: 0;
}
/* 底部 */
.cart-foot{
height: 50px;
line-height: 50px;
border: 1px solid #ccc;
}
.section-left a{
margin-left: 32px;
color: #757575;
}
.section-left span{
margin-left: 16px;
padding-left: 16px;
color: #757575;
border-left: 1px solid #ccc;
}
.section-left i{
color: #ff6700;
}
.settlement{
margin-left: 40px;
padding:0 40px ;
font-size: 18px;
background-color: orange;
color: #fff;
}
.total-price{
color: #ff6700;
}
.total-price em{
font-size: 30px;
}
js结构
//获取到页面中所有复选框check
var check = document.querySelectorAll('.check');
console.log(check.length);
//获取到商品栏复选框
var single = document.querySelectorAll('.single');
console.log(single.length);
//获取每一行商品栏
var itemBox = document.querySelectorAll('.item-box');
console.log(itemBox);
for(var i=0;i<check.length;i++){
//给所有复选框添加事件
check[i].onclick = function(e){
//判断是否全选
var count = 0;
//判断全选框
if(e.target.getAttribute('id') == 'all'){
//把全选状态赋值给每一个checkbox
for(j=0;j<single.length;j++){
single[j].checked = this.checked
}
}
for(var k = 0; k<single.length;k++){
if(single[k].checked){
count++;
}
if( count == single.length){
check[0].checked = true;
}else{
check[0].checked = false;
}
}
fTotal();
}
}
//给商品每一行添加事件
for(var i = 0;i<itemBox.length;i++){
itemBox[i].onclick = function(e){
var input = this.getElementsByTagName('input')[1];
switch(e.target.className){
case 'jiahao':
// alert('加');
input.value = parseInt(input.value)+1;
fTotalSum(this);
break;
case 'jianhao':
// alert('减');
input.value = parseInt(input.value)-1 <=1 ? 1:parseInt(input.value)-1;
fTotalSum(this);
break;
case 'col col-action u-r':
var con = confirm('确定删除吗？');
if( con ){
this.parentNode.removeChild(this);
}
break;
}
//调用 计算总数量和总价
fTotal()
}
}
// 定义一个函数计算 小计 That === this 就是商品每一行
function fTotalSum(That){
//获取当前行的数量
var num = That.getElementsByTagName('input')[1].value;
//获取当前行的单价 取整是为了省略掉'元'字符串，方便计算
var price = parseInt(That.querySelector('.col-price').innerHTML);
// 最终小计值为数量乘以单价
That.querySelector('.col-sum').innerHTML = num * price+'元';
};
//定义一个函数 方便调用总数量 和 合计
function fTotal(){
//获取到总价节点
var totalPrice = document.getElementById('totalPrice');
//总价
var price = 0;
//获取到总件节点
var totalNum = document.getElementById('totalNum');
//数量总和
var Num = 0;
//获取每一行商品盒子
var itemBox = document.querySelectorAll('.item-box');
for(var i = 0; i<itemBox.length;i++){
itemBox[i].getElementsByTagName('input')[1].value;
//选中了，才拿数量和价格
if( itemBox[i].getElementsByTagName('input')[0].checked ){
Num += parseInt(itemBox[i].getElementsByTagName('input')[1].value);
price += parseInt(itemBox[i].querySelector('.col-sum').innerHTML);
}
}
//合并把总和数量写到标签里
totalNum.innerHTML = Num;
totalPrice.innerHTML = price;
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
js实现简单的购物车有图有代码
如图: 全选按钮的实现为: 复制代码 代码如下: <input type="checkbox" name="all" onclick="checkAll()" />全选<br /> <input type="checkbox" name="item" value="3000" />笔记本电脑:3000元<br /> <input t
-
Jsp+Servlet实现购物车功能
本文实例为大家分享了Servlet实现购物车功能的具体代码,供大家参考,具体内容如下 (1)用servlet实现简单的购物车系统,项目结构例如以下:(新建web Project项目 仅仅须要AddItemServlet , ListItemServlet.exam403.jsp三个文件就可以.其它的不用管) (2)exam403.jsp代码例如以下: <%@ page contentType="text/html; charset=gb2312" language="
-
简单的前端js+ajax 购物车框架(入门篇)
今天在公司实在没有事做,突然就想到写下商城的购物车的前端框架,当然我这里只有购物车的增删改查,也许写的并不是那么完善,但最重要的是一个入门,也希望js达人给些建议,好让我更上一个台阶. HOHO~~~开始咯: Js: 复制代码 代码如下: //为了省事,就没写自己的js ajax了 用了jquery的,当然你也可以添加到jquery的扩展方法内,哈哈,我太懒了,所以就写这里了. var _$ = { AJAX: function (urlparm, d, beforecall, successc
-
vuejs手把手教你写一个完整的购物车实例代码
由于我们公司是主营业务是海淘,所以每个项目都是类似淘宝天猫之类的商城,那么购物车就是一个重点开发功能模块.介于之前我都是用jq来写购物车的,这次就用vuejs来写一个购物车.下面我就从全选,数量控制器,运费,商品金额计算等方法来演示一下一个能用在实际场景的购物车是怎么做出来的以及记录一下这次用vuejs踩过的坑. 1.一层数据结构-全选 下面这段代码和vuejs官网里面checkbox绑定很像.不明白的可以直接上vuejs官网看看. <!DOCTYPE html> <html lang=
-
js实现仿购物车加减效果
效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } body{ overflow-y: auto; } ul{ margin-top: 20px; border-top: 1px solid #666; } h1{ widt
-
Javascript实现购物车功能的详细代码
我们肯定都很熟悉商品购物车这一功能,每当我们在某宝某东上购买商品的时候,看中了哪件商品,就会加入购物车中,最后结算.购物车这一功能,方便消费者对商品进行管理,可以添加商品,删除商品,选中购物车中的某一项或几项商品,最后商品总价也会随着消费者的操作随着变化. 现在,笔者对购物车进行了简单实现,能够实现真实购物车当中的大部分功能.在本示例当中,用到了javascript中BOM操作,DOM操作,表格操作,cookie,json等知识点,同时,采用三层架构方式对购物车进行设计,对javascript的
-
Javascript操纵Cookie实现购物车程序
复制代码 代码如下: /***************************************************************************************************** Name 购物车 Version 1.1 Author Vanni(凡林) url:www.27sea.com QQ:303590170 CreateDate 2005-05-31 Description 此类是基于JavaScript和客户端Cookie,请保证客户端开
-
JavaScript编写一个简易购物车功能
网上关于购物车实现的代码非常多,今天看了一些知识点,决定自己动手写写,于是写了一个简易购物车,接下来讲解一下具体的实现. 1.用html实现内容: 2.用css修饰外观: 3.用js(jq)设计动效. 第一步:首先是进行html页面的设计,我用一个大的div将所有商品包含,然后用不同的div将不同的商品进行封装,商品列表中我用了ul li实现,具体实现代码如下(代码中涉及到的商品都是网上随便copy的,不具有参考价值): <div id="goods"> <div c
-
js购物车实现思路及代码(个人感觉不错)
复制代码 代码如下: <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServer
-
原生js模拟淘宝购物车项目实战
本文实例讲述了原生js模拟淘宝购物车实现代码.分享给大家供大家参考.具体如下: 通过JavaScript实现类似与淘宝的购物车效果,包括商品的单选.全选.删除.修改数量.价格计算.数目计算.预览等功能的实现.实现的效果图: 相应的代码: shoppingCart.html <!DOCTYPE html> <html> <head> <meta charset = "UTF-8"> <title>JavaScript实现购物车项