javascript购物车

快来打我* 2022-01-23 13:53 414阅读 0赞

## 购物车 ##

<style type="text/css">
    			body,html{
    				background-color: whitesmoke;
    			}
    			.shopBox{
    				width: 425px;
    				height: 375px;
    				background-color: white;
    				margin: 0 auto;
    				position: relative;
    			}
    			.shopLine{
    				/*background-color: pink;*/
    				height: 70px;
    				padding: 15px;
    				position: relative;
    				box-shadow: 3px 3px 3px #dddddd;
    				margin-bottom: 3px;
    			}
    			.shopLine img{
    				float: left;
    				width: 70px;
    				height: 70px;
    			}
    			.inputBox{
    				float: left;
    				margin-top: 30px;
    				margin-right: 10px;
    			}
    			.shopDetails{
    				float: left;
    				margin-left: 20px;
    			}
    			.shopDetails span{
    				display: block;
    				margin-bottom: 5px;
    			}
    			.shopDetails span:nth-child(2){
    				color: gray;
    				font-size: 13px;
    				margin: 8px 0;
    			}
    			.shopDetails span:nth-child(3){
    				color: #e4393e;
    				font-size: 16px;
    			}
    			.shopCalc{
    				position: absolute;
    				bottom: 10px;
    				right: 20px;
    				border: 1px solid #9A9A9A;
    				line-height: 30px;
    				text-align: center;
    				border-radius: 5px;
    			}
    			.calcDown,.calcUp{
    				display: inline-block;
    				width: 30px;
    				height: 30px;
    				cursor: pointer;
    			}
    			.calcNum{
    				width: 28px;
    				height: 28px;
    				border: none;
    				text-align: center;
    				border-left: 1px solid #9A9A9A;
    				border-right: 1px solid #9A9A9A;
    				outline: none;
    			}
    			.shopCart{
    				position: absolute;
    				width: 100%;
    				height: 70px;
    				background-color: pink;
    				bottom: 0;
    				left: 0;
    			}
    			.shopCon{
    				position: relative;
    				padding: 0 15px;
    			}
    			.totalPrices{
    				float: left;
    				margin-left: 50px;
    				line-height: 80px;
    			}
    		</style>
    	</head>
    	<body>
    		
    		
    		
    		<div id="app">
    			<div class="shopBox">
    				
    				<div class="shopLine">
    					<div class="inputBox">
    						<input class="sigChecked" type="checkbox" />
    					</div>
    					<img src="https:\/\/fjlyl.xyz\/assets\/hairDye\/products (1).jpg" />
    					<div class="shopDetails">
    						<span>施华蔻伊采染发膏60ml</span>
    						<span>规格:50克</span>
    						<span>¥<label class="sigPrices">50</label></span>
    					</div>
    					<div class="shopCalc">
    						<span  class="calcDown">-</span>
    						<input class="calcNum" value="1" />
    						<span  class="calcUp">+</span>
    					</div>
    				</div>	
    				
    				<div class="shopLine">
    					<div class="inputBox">
    						<input class="sigChecked" type="checkbox" />
    					</div>
    					<img src="https:\/\/fjlyl.xyz\/assets\/hairDye\/products (1).jpg" />
    					<div class="shopDetails">
    						<span>施华蔻伊采染发膏60ml</span>
    						<span>规格:50克</span>
    						<span>¥<label class="sigPrices">69</label></span>
    					</div>
    					<div class="shopCalc">
    						<span  class="calcDown">-</span>
    						<input class="calcNum" value="1" />
    						<span  class="calcUp">+</span>
    					</div>
    				</div>	
    				
    				<div class="shopCart">
    					<div class="shopCon">
    						<div class="inputBox">
    							<input class="allChecked" type="checkbox" />全选
    						</div>
    						<div class="totalPrices">
    							总价:¥ <span class="allPrices">0</span>
    						</div>
    					</div>
    				</div>
    				
    			</div>
    		</div>
    	</body>
    	<script type="text/javascript">
    		//商品数组
    		var shopLine = document.getElementsByClassName('shopLine');
    		//价格数组
    		var sigPrices = document.getElementsByClassName('sigPrices');
    		//总价
    		var allPrices = document.getElementsByClassName('allPrices')[0];
    		//减法按钮数组
    		var calcDown = document.getElementsByClassName('calcDown');
    		//加法按钮数组
    		var calcUp = document.getElementsByClassName('calcUp');
    		//商品的数量的输入框数组
    		var calcNum = document.getElementsByClassName('calcNum');
    		//全选按钮
    		var allChecked = document.getElementsByClassName('allChecked')[0];
    		//单个勾选按钮的数组
    		var sigChecked = document.getElementsByClassName('sigChecked');
    		
    		//全选按钮的监听onchange
    		allChecked.onchange = function () {
    			var checked = allChecked.checked;//全选按钮的已经被改变的那个值
    			//全部的单个复选框  都应该和 全选按钮的值是一致的
    			for(var i=0;i<sigChecked.length;i++){
    				sigChecked[i].checked = checked;
    			}
    			arrCheck();
    			totalPrices();
    		}
    		
    		for(var i=0;i<shopLine.length;i++){
    			//每个单个勾选的监听onchange
    			sigChecked[i].onchange = function() {
    				//arrChecked  这个数组中相对应的布尔值  来去判断  全选按钮是否被勾选上
    				arrCheck();
    				var checked = true;//假定全选按钮的值为true
    				for(var i=0;i<arrChecked.length;i++){
    					if(arrChecked[i] == false){
    						checked = false;//只要有一个没选上  全选按钮 就没有被选上
    						break;
    					}
    				}
    				allChecked.checked = checked;
    				totalPrices();
    			}
    			//加法
    			calcUp[i].index = i;//
    			calcUp[i].onclick = function () {
    				//calcNum[this.index].value
    				var num = parseInt(calcNum[this.index].value) + 1;
    				
    				calcNum[this.index].value = num;
    				totalPrices();
    			}
    			//减法
    			calcDown[i].index = i;
    			calcDown[i].onclick = function () {
    				//字符串 数值的时候  它是有隐式转换的嘛  '3'-1
    				var num = parseInt(calcNum[this.index].value);
    				num = num == 1?1:num - 1;
    				calcNum[this.index].value = num;
    				totalPrices();
    			}
    			//手动输入
    			calcNum[i].index = i;
    			//onblur监听 input框 脱离焦点的事件
    			calcNum[i].onblur = function () {
    				var num = calcNum[this.index].value;
    				//判断是否为数字
    				num = isNaN(num)? 1 : Math.ceil(num);
    				
    				num = num < 0 ? 1 : num;
    				
    				calcNum[this.index].value = num;
    				totalPrices();
    			}
    		}
    		//每次把变动的sigChecked的每个布尔值都重新获得
    		var arrChecked = [];
    //		var cart = [
    //				{shopId:1,isChecked:true,prices:50,shopName:'name0',num:5},
    //				{shopId:2,isChecked:true,prices:69,shopName:'name1',num:5}
    //			]
    		//一开始就刷新数组里的值
    		arrCheck();
    		//每个单个勾选的布尔值的数组
    		function arrCheck () {
    			for(var i=0;i<sigChecked.length;i++){
    				arrChecked.splice(i,1,sigChecked[i].checked);
    			}
    			console.log(arrChecked);
    			//totalPrices();
    		}
    		
    		//计算总价  每处有变动就需要做计算
    		function totalPrices () {
    			var totalPrices = 0;
    			for(var i=0;i<arrChecked.length;i++){
    				if(arrChecked[i]){
    					//单价*数量
    					totalPrices += parseFloat(sigPrices[i].innerHTML) * calcNum[i].value
    				}
    			}
    			allPrices.innerHTML = totalPrices;
    		}
    		
    	</script>

效果图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eWxlMjAxOTA0_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eWxlMjAxOTA0_size_16_color_FFFFFF_t_70]: /images/20220123/abf82048985d485885117c98ed8129fd.png

发表评论取消回复

表情：

评论列表（有 0 条评论，414人围观）

还没有评论，来说两句吧...

相关阅读

相关购物车

面向数据的操作自我总结：特重要 // 对数据的操作全部根据id(唯一标识符)，来对数据的一系列操作 // 每一次操作都和数据中的id唯一标识符离不开，要对数据进行

系统管理员/ 2022年12月29日 09:41/ 0 赞/ 254 阅读

相关购物车javascript代码（二）

class Cart \{ // 静态方法声明在class中 static checkOne; static all; constructor() \{ Ca

系统管理员/ 2022年12月16日 10:59/ 0 赞/ 186 阅读

相关购物车javascript代码（一）

class Goods \{ // 实例化的时候自动调用 constructor() \{ Goods.list() \} // 获取商品信息的 // s

╰半夏微凉°/ 2022年12月16日 10:58/ 0 赞/ 224 阅读

相关购物车）

效果：首页面的效果 ![Center][] 购物车的效果： ![Center 1][] 我的效

绝地灬酷狼/ 2022年06月07日 11:54/ 0 赞/ 365 阅读

相关购物车商品计算JavaScript实现

html代码 <div> <p>单价:<span>30</span></p> <input type="button" value="

素颜马尾好姑娘i/ 2022年05月27日 12:36/ 0 赞/ 268 阅读

相关 JavaScript实现购物车

![70][] ![70 1][] <!DOCTYPE html> <html lang="en"> <head> <meta charse

男娘i/ 2022年05月19日 00:22/ 0 赞/ 365 阅读

相关购物车

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

小灰灰/ 2022年05月15日 03:12/ 0 赞/ 348 阅读

相关 JavaScript淘宝购物车

Html中的代码 <body> <div class="catbox"> <table id="cartTable"> <t

ゞ浴缸里的玫瑰/ 2022年02月02日 18:53/ 0 赞/ 278 阅读

相关 javascript购物车

购物车 <style type="text/css"> body,html{ background-color: whitesmok

快来打我*/ 2022年01月23日 13:53/ 0 赞/ 415 阅读

相关 Javascript实现购物车案例--Javascript学习

JavaScript实现购物车来进行设计一个购物车的功能 html代码： <!DOCTYPE html> <html> <head>

た入场券/ 2022年01月21日 11:33/ 0 赞/ 794 阅读