JS实现购物车功能

最新推荐文章于 2023-06-30 21:55:03 发布
最新推荐文章于 2023-06-30 21:55:03 发布
阅读量389 收藏 2
点赞数 2
分类专栏： 手写及实现 文章标签： HTMl CSS JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39085895/article/details/82377929
版权

花了半天的时间扣了一个购物车，以下是效果图及源码：这里写图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/car_demo.css"/>
	</head>
	<body>
		<div class="main">
			<ul class="title">
				<li>
					<input id="checkAll" type="checkbox" />
					<span>全选</span>
				</li>
				<li>商品</li>
				<li>单价</li>
				<li>数量</li>
				<li>小计</li>
				<li>操作</li>
			</ul>
			<ul class="list">
				<li data-id="11">
					<div class="list_item check">
						<input class="checkone" type="checkbox" />
					</div>
					<div class="list_item goods">
						<div class="pickture"><img src="images/111.png"/></div>
						<div class="name">荣耀10 GT游戏加速 AIS手持夜景 6GB+64GB 幻影蓝全网通 移动联通电信4G 双卡双待</div>
					</div>
					<div class="list_item price">￥<span class="priceone">1000.00</span></div>
					<div class="list_item number">
						<input class="reduce" type="button" value="-" />
						<input class="numbox" type="text" value="1" />
						<input class="plus" type="button" value="+" />
					</div>
					<div class="list_item subtotal"></div>
					<div class="list_item delete">删除</div>
				</li>
				<li data-id="22">
					<div class="list_item check">
						<input class="checkone" type="checkbox" />
					</div>
					<div class="list_item goods">
						<div class="pickture"><img src="images/222.png"/></div>
						<div class="name">荣耀10 GT游戏加速 AIS手持夜景 6GB+64GB 幻影蓝全网通 移动联通电信4G 双卡双待</div>
					</div>
					<div class="list_item price">￥<span class="priceone">2000.00</span></div>
					<div class="list_item number">
						<input class="reduce" type="button" value="-" />
						<input class="numbox" type="text" value="1" />
						<input class="plus" type="button" value="+" />
					</div>
					<div class="list_item subtotal"></div>
					<div class="list_item delete">删除</div>
				</li>
				<li data-id="33">
					<div class="list_item check">
						<input class="checkone" type="checkbox" />
					</div>
					<div class="list_item goods">
						<div class="pickture"><img src="images/333.png"/></div>
						<div class="name">荣耀10 GT游戏加速 AIS手持夜景 6GB+64GB 幻影蓝全网通 移动联通电信4G 双卡双待</div>
					</div>
					<div class="list_item price">￥<span class="priceone">3000.00</span></div>
					<div class="list_item number">
						<input class="reduce" type="button" value="-" />
						<input class="numbox" type="text" value="1" />
						<input class="plus" type="button" value="+" />
					</div>
					<div class="list_item subtotal"></div>
					<div class="list_item delete">删除</div>
				</li>
				<li data-id="44">
					<div class="list_item check">
						<input class="checkone" type="checkbox" />
					</div>
					<div class="list_item goods">
						<div class="pickture"><img src="images/444.png"/></div>
						<div class="name">荣耀10 GT游戏加速 AIS手持夜景 6GB+64GB 幻影蓝全网通 移动联通电信4G 双卡双待</div>
					</div>
					<div class="list_item price">￥<span class="priceone">4000.00</span></div>
					<div class="list_item number">
						<input class="reduce" type="button" value="-" />
						<input class="numbox" type="text" value="1" />
						<input class="plus" type="button" value="+" />
					</div>
					<div class="list_item subtotal"></div>
					<div class="list_item delete">删除</div>
				</li>
				<li data-id="55">
					<div class="list_item check">
						<input class="checkone" type="checkbox" />
					</div>
					<div class="list_item goods">
						<div class="pickture"><img src="images/555.png"/></div>
						<div class="name">荣耀10 GT游戏加速 AIS手持夜景 6GB+64GB 幻影蓝全网通 移动联通电信4G 双卡双待</div>
					</div>
					<div class="list_item price">￥<span class="priceone">5000.00</span></div>
					<div class="list_item number">
						<input class="reduce" type="button" value="-" />
						<input class="numbox" type="text" value="2" />
						<input class="plus" type="button" value="+" />
					</div>
					<div class="list_item subtotal"></div>
					<div class="list_item delete">删除</div>
				</li>
			</ul>
			<ul class="foot">
				<li id="removes">删除</li>
				<li>
					已选商品<span id="checknum">0</span>件&nbsp;&nbsp;&nbsp;&nbsp;
					合计：￥<span id="allPrice">0</span>
				</li>
				<li id="payfor">结算</li>
			</ul>
		</div>
		<script type="text/javascript">
			window.onload=function(){
				var listArr = document.querySelector('.list');              //列表
				var oLi = listArr.getElementsByTagName('li');               //获取行
				var checkAll = document.getElementById('checkAll');         //全选
				var checkOne = document.querySelectorAll('.checkone');      //单选
				var priceOne = document.querySelectorAll('.priceone');      //单价
				var goodsNum = document.querySelectorAll('.numbox');        //单个商品数量
				var reduceBtn = document.querySelectorAll('.reduce');       //数量减
				var plusBtn = document.querySelectorAll('.plus');           //数量加
				var subtotalPrice = document.querySelectorAll('.subtotal'); //小计
				var deleteBtn = document.querySelectorAll('.delete');       //单个删除
				var removesBtn = document.getElementById('removes');        //多个删除
				var checkNum = document.getElementById('checknum');         //件数
				var allPrice = document.getElementById('allPrice');         //总价
				
				total_price();
				var num;
				var price_all = 0;
				var idArry = [];
				
				//小计
				function total_price(){
					for(var i=0;i<priceOne.length;i++){ 
						var oneNum = priceOne[i].parentNode.parentNode.getElementsByClassName('numbox')[0].value;
						var onePrice = priceOne[i].parentNode.parentNode.getElementsByClassName('priceone')[0].innerHTML;
						var oneTotal = priceOne[i].parentNode.parentNode.getElementsByClassName('subtotal');
						oneTotal[0].innerHTML = parseInt(oneNum)*parseFloat(onePrice);
					}
				}
				
				//数量减
				for(var i=0;i<reduceBtn.length;i++){
					reduceBtn[i].onclick = function(){
						num = parseInt(this.parentNode.parentNode.getElementsByClassName('numbox')[0].value);
						if(num<=1){
							this.disabled = true;
							return false;
						}
						num --;
						this.parentNode.parentNode.getElementsByClassName('numbox')[0].value = num;
						total_price();
						if(this.parentNode.parentNode.getElementsByClassName('checkone')[0].checked){
							allPrice.innerHTML = parseFloat(allPrice.innerHTML)-parseFloat(this.parentNode.parentNode.getElementsByClassName('priceone')[0].innerHTML);
						}
					}
				}
				
				//数量加
				for (var i=0;i<plusBtn.length;i++) {
					plusBtn[i].onclick = function(){
						num = parseInt(this.parentNode.parentNode.getElementsByClassName('numbox')[0].value);
						num ++;
						if(num>1){
							this.parentNode.parentNode.getElementsByClassName('reduce')[0].disabled = false;
						}
						this.parentNode.parentNode.getElementsByClassName('numbox')[0].value = num;
						total_price();
						if(this.parentNode.parentNode.getElementsByClassName('checkone')[0].checked){
							allPrice.innerHTML = parseFloat(allPrice.innerHTML)+parseFloat(this.parentNode.parentNode.getElementsByClassName('priceone')[0].innerHTML);
						}
					}
				}
				
				//总价
				function priceAll(){
					for(var i=0;i<checkOne.length;i++){
						if(checkOne[i].checked){
							price_all += parseFloat(checkOne[i].parentNode.parentNode.getElementsByClassName('subtotal')[0].innerHTML);
							allPrice.innerHTML = price_all;
						}else{price_all = 0;}
					}
					return price_all;
				}
				
				//删除数组元素
				function remove(arr,val) {
			        for(var i=0; i<arr.length; i++) {
					    if(arr[i] == val) {
					        arr.splice(i, 1);
					        break;
					    }
					}
			        return arr;
			    };
				//单选
				for (var i=0;i<checkOne.length;i++) {
					checkOne[i].index = i;
					checkOne[i].onclick = function(e){
						var count = 0;
						var dataId = this.parentNode.parentNode.getAttribute('data-id');
						if(this.checked){
							allPrice.innerHTML = parseFloat(allPrice.innerHTML)+parseFloat(this.parentNode.parentNode.getElementsByClassName('subtotal')[0].innerHTML);
							checkNum.innerHTML = parseInt(checkNum.innerHTML)+1;
							idArry.push(dataId);
						}else{
							allPrice.innerHTML = parseFloat(allPrice.innerHTML)-parseFloat(this.parentNode.parentNode.getElementsByClassName('subtotal')[0].innerHTML);
							checkNum.innerHTML = parseInt(checkNum.innerHTML)-1;
							idArry = remove(idArry,dataId);
						}
						console.log(idArry)
						for (var j = 0; j < checkOne.length; j++) {
	                        if(checkOne[j].checked==true){
	                        	count++;
	                        }
	                        else{count-1}
	                    } 
						if(count == oLi.length){checkAll.checked = true;}
						if(!this.checked){
							checkAll.checked = false;
							price_all = 0;
						}
					}
				}
				setTimeout(function() {  //延时自动触发全选事件
				    // IE
				    if(document.all) {
				        checkAll.click();
				    }
				    // 其它浏览器
				    else {
				        var e = document.createEvent("MouseEvents");
				        e.initEvent("click", true, true);
				        checkAll.dispatchEvent(e);
				    }
				}, 100);
				//全选
				checkAll.onclick = function(){
					for(var i=0;i<checkOne.length;i++){
				        checkOne[i].checked=this.checked;
				    }
				    if(this.checked){
				        priceAll();
				        checkNum.innerHTML = checkOne.length;
				        for (var i = 0; i < oLi.length; i++) {
	                        idArry.push(oLi[i].getAttribute('data-id'))
	                    }
				    }
				    else{
				    	priceAll();
				        allPrice.innerHTML = 0;
				        price_all = 0;
				        checkNum.innerHTML = 0;
				        idArry = [];
				    }
				    console.log(idArry)
				}
				
				//单删
				for(var i=0;i<deleteBtn.length;i++){
					deleteBtn[i].onclick = function(){
						var delets = confirm('确定删除所选商品吗？'); //弹出确认框
						var dataId = this.parentNode.getAttribute('data-id');
		                if (delets) {
		                	this.parentNode.className = 'list_act';
		                	console.log(this.parentNode.className)
		                	var that = this;
                            setTimeout(function(){
                            	listArr.removeChild(that.parentNode); // 删除相应节点
                            },350)
		                    if(this.parentNode.getElementsByClassName('checkone')[0].checked){
								allPrice.innerHTML = parseFloat(allPrice.innerHTML)-parseFloat(this.parentNode.getElementsByClassName('subtotal')[0].innerHTML);
								checkNum.innerHTML = parseInt(checkNum.innerHTML)-1;
								if(oLi.length==0){
									checkAll.checked = false;
								}
		                    }
		                }
		                if(idArry.indexOf(dataId)!=-1){
		                	idArry = remove(idArry,dataId);
		                }
		                console.log(idArry)
		                if(idArry == ''){checkAll.checked = false;}
					}
				}
				
				//多删
				removesBtn.onclick = function(){
					if (checkNum.innerHTML != 0) {
		                var delets = confirm('确定删除所选商品吗？'); //弹出确认框
		                if (delets) {
		                    for (var i = 0; i < oLi.length; i++) {
		                        if (oLi[i].querySelectorAll('.checkone')[0].checked) {
									oLi[i].parentNode.removeChild(oLi[i]); // 删除相应节点
		                            i--; //回退下标位置
		                        }
		                    }
		                    allPrice.innerHTML = 0;
		                    checkNum.innerHTML = 0;
		                    checkAll.checked = false;
		                    idArry = [];
		                }
		            } else {
		                alert('请选择商品！');
		            }
				}
				
				//数目框输入事件
				for(var i=0;i<goodsNum.length;i++){
					goodsNum[i].onkeyup = function(){
						var val = parseInt(this.value);
		                if (isNaN(val) || val <= 0) {
		                    val = 1;
		                }
		                if (this.value != val) {
		                    this.value = val;
		                }
		                total_price();
		                priceAll()
					}
				}
			}
		</script>
	</body>
</html>

css

*{font-family: Arial, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "\u5FAE\u8F6F\u96C5\u9ED1", "WenQuanYi Micro Hei", sans-serif;}
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; } 
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; } 
h1, h2, h3, h4, h5, h6{ font-size:100%; } 
address, cite, dfn, em, var { font-style:normal; } 
code, kbd, pre, samp { font-family:couriernew, courier, monospace; } 
small{ font-size:12px; } 
ul, ol { list-style:none; } 
a { text-decoration:none; } 
a:hover { text-decoration:underline; } 
sup { vertical-align:text-top; } 
sub{ vertical-align:text-bottom; } 
legend { color:#000; } 
fieldset, img { border:0; } 
button, input, select, textarea { font-size:100%; } 
table { border-collapse:collapse; border-spacing:0; }
/*******     *******\
 *     *     *     *
 *  O  *     *  O  *
 *     *     *     *
 \******     ******/
.main{width:1000px;margin:100px auto;}
.title{zoom:1;border-top: 1px solid #FF5500;background-color: #fafafa;}
.title:after{
    content:".";
    clear:both;
    display:block;
    height:0;
    overflow:hidden;
    visibility:hidden;
}
.title li{float:left;height:50px;line-height:50px;text-align:center;font-size: 16px;}
.title li:nth-child(1){width:100px;}
.title li:nth-child(2){width:350px;}
.title li:nth-child(3){width:130px;}
.title li:nth-child(4){width:160px;}
.title li:nth-child(5){width:130px;}
.title li:nth-child(6){width:130px;}
.list{zoom:1;}
.list li:after{
    content:".";
    clear:both;
    display:block;
    height:0;
    overflow:hidden;
    visibility:hidden;
}
.list li{height:120px;text-align: center;transition: 0.5s;}
.list_act{animation: changeHeight .35s;}
@keyframes changeHeight{
	from{height:120px;}
	to{height:0px;}
}
.list li:hover{
	box-shadow: 0 0 15px rgba(0,0,0,0.2);
    transform: translate3d(0,-2px,0);
    transition: 0.5s;
    z-index: 9;
    position: relative;
}
.list li:hover .name{color:#FF5500;}
.list_item{height:120px;float: left;}
.check,.price,.subtotal,.delete,.number{line-height: 120px;text-align: center;}
.check{width:100px;}
.goods{width:350px;}
.price{width:130px;}
.number{width:160px;}
.subtotal{width:130px;}
.delete{width:130px;}
.list li:nth-child(even) {background: #fafafa;}
.goods{position: relative;}
.pickture{
	width:100px;
	height:100px;
	margin:10px;
	position: absolute;
	display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
input[type='checkbox']{cursor: pointer;}
.pickture img{width:100%;}
.name{
	margin:40px auto auto 120px;
	height:40px;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	font-size: 14px;
	line-height: 22px;
	text-align: left;
	cursor: pointer;
}
.price{color: #FF5500;}
.number input{height:20px;display: inline-block;vertical-align: middle;}
.number input[type='button']{
	width:20px;
	margin:auto 5px;
	cursor: pointer;
	background-color: #ffffff;
	border: 1px solid #e3e3e3;
}
.number input[type='text']{width:60px;text-align: center;}
.delete{cursor: pointer;}
.delete:hover{color: #FF5500;}
.foot{zoom:1;border-top: 1px solid #FF5500;background-color: #fafafa;}
.foot:after{
    content:".";
    clear:both;
    display:block;
    height:0;
    overflow:hidden;
    visibility:hidden;
}
.foot li{float:left;height:50px;line-height:50px;text-align:center;font-size: 16px;}
.foot li:nth-child(1){width:100px;cursor: pointer;}
.foot li:nth-child(2){width:770px;text-align: right;}
.foot li:nth-child(3){width:130px;cursor: pointer;}
.foot span{color: #FF5500;font-size: 20px;}
#removes:hover{color: #FF5500;}
#payfor:hover{color: #FF5500;}

之前做过JQ的购物车，一直想写一个纯js的购物车，所以就抽空码了一个，多有不足，阅览后请指教;

转载请说明出处附链接，谢谢~~~

伍什kay
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript购物车详解实现购物车完整功能(附效果图，完整代码)
笨鸟学飞的博客
08-11 4万+
我们肯定都很熟悉商品购物车这一功能，每当我们在某宝某东上购买商品的时候，看中了哪件商品，就会加入购物车中，最后结算。购物车这一功能，方便消费者对商品进行管理，可以添加商品，删除商品，选中购物车中的某一项或几项商品，最后商品总价也会随着消费者的操作随着变化。
javascript实现简单购物车功能（有图）
热门推荐
Of_the的博客
08-09 3万+
Js实现淘宝购物车类似功能： 主要有添加商品 增加和减少商品数量 根据增加、减少或选择的商品获取金额 实现商品价格的计算 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;购物车&lt;/title&
js实现购物车
m0_73481765的博客
06-30 3541
我们也添加了一个加入购物车的按钮，当这个按钮被点击时，我们会调用一个名为addToCart的函数。当用户点击“加入购物车”按钮时，商品将被添加到购物车中，并且购物车中商品的数量和总价将显示在HTML页面上。接下来，我们需要显示商品列表。我们将使用JavaScript循环遍历商品数组，并将每个商品的名称、价格和图片添加到HTML页面中。这个函数首先清空购物车HTML中的内容，然后遍历购物车数组，并将每个购物车物品的名称、价格和数量添加到HTML中。这个函数将从商品数组中取出商品，并将它添加到购物车数组中。
JS实现简单的购物车
最新发布
dxn16638400024的博客
06-30 3172
中是否已经有该产品，有的话数量加一并更新，没有则创建一个新对象并添加到购物车列表中。同时，每次添加或删除购物车物品后都需要更新购物车总计。最后，点击结算按钮后将购物车清空并重置总金额。作为购物车中的物品，它的键是产品 ID，值是包含产品信息的对象。添加至购物车时，首先检查。由于是实现基本的功能，就不弄得多复杂了，代码可以直接Ctrl+c/v，大家可以试一试！这个简单的购物车实现使用了一个对象。
js实现购物车功能
06-14
原生js实现简单购物车功能，方便简单，可直接使用到web
用js实现购物车
yichan_xiaoxiong的博客
06-10 859
js代码/** * Created by an.han on 13-12-17. */window.onload = function () {    if (!document.getElementsByClassName) {        document.getElementsByClassName = function (cls) {            var ret = [];  ...
Js购物车功能实现
前端程序媛_Ying博客
12-04 665
购物车功能实现
原生js实现购物车功能
01-18
本文实例为大家分享了js实现购物车功能的具体代码，供大家参考，具体内容如下 使用html配合原生js实现购物车功能 * 实现购物车商品数量的加减，注意数量最少为1，数量输入仅能为数字 * 实现购物车商品的移除 * 可以...
JavaScript实现购物车功能
04-11
购物车计算价格， 添加物品数量，删除物品， 物品单独计价，总价计算， 登录注册功能 时钟展示 基本的DOM操作，使用jquery实现 数组操作，函数调用
JS随手记——商城购物车的分析与实现
01-20
目标需求 实现网上商城的购物车功能，将物品添加到购物车，并能一直保持商品在购物车内的状态。 分析 首先，页面传值和数组存储信息怕是不行了，则例我们选择使用cookie来实现，毕竟大佬如是说： JS实现Cookie的设置与读取可以参考一下我的上篇文章：JS随手记——Cookie的设置与读取。 具体实现 购物车功能，首先肯定就是添加到购物车了，添加事件如下： function addbuycar(){ //获取当前路径并切割ID var url = [removed].href; var phoneid = url.split(?)[1];
JS实现加入购物车
01-14
JS实现加入购物车
基于JavaScript实现购物车功能
10-20
主要为大家详细介绍了基于JavaScript实现购物车功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Javascript实现购物车功能的详细代码
10-18
使用js实现购物车的价格计算，商品数量更换，商品删除等功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
angular.js实现购物车功能
11-27
本文实例为大家分享了angular.js购物车功能的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>购物车</title> ...
使用JavaScript实现简单的购物车功能
weixin_45730094的博客
05-11 7117
JavaScript 购物车
前端实战——实现购物车功能
qmqm33的博客
10-01 1万+
天猫实战——实现购物车功能 学习了一段时间前端，掌握了一些基本技能，只有进行实践操作，才能将自己学到的充分掌握。首页等一系列代码已经开源到github。 地址：https://github.com/qiaoj-ka 以下是对于购物车页面，以及一些交互。 ...
Js实现淘宝购物车类似功能(DOM综合应用)
Carrywill的博客
02-18 1万+
ShoppingCart 购物车这个前端Deom中的很多功能是使用js脚本实现的。 具体效果有：1.可以全选，全不选商品。2.选中的商品，点击下面“删除所选”按钮可以批量删除3.每个商品，可以在该商品信息栏最后的“删除”按钮删除该商品4.每个商品，可以在该商品信息栏增加或减少商品的数量，改变后该商品的小计价格及最后的商品总价自动发生变化。阅读提示：html是网上练习的模板，css部分也没有什么好说...
JavaScript实现购物车基本功能
10-19
主要为大家详细介绍了JavaScript实现购物车的基本功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
用js实现购物车功能代码
06-08
好的，以下是一个简单的用 JavaScript 实现购物车功能的示例代码： HTML: ```html 商品列表 商品1" data-price="10">商品1 - 10元 商品2" data-price="20">商品2 - 20元 商品3" data-price="30">商品3 - 30...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值