首页 > 代码库 > 购物车的高级实现 逻辑结构清晰
购物车的高级实现 逻辑结构清晰
HTML:
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>购物车案例</title> 6 7 <style> 8 *{ 9 margin:10px; 10 font-family:"微软雅黑"; 11 color:#747474; 12 } 13 14 #header span { 15 display:inline-block; 16 display:-moz-inline-box; 17 width:6%; 18 color: #F97F82; 19 } 20 .tol{ 21 position:absolute; 22 top:30px; 23 left:720px; 24 background:#36F4B0; 25 color:#F1090D; 26 } 27 #wrap { 28 height:400px; width:600px; overflow:scroll; align-content:center; 29 background-color:#41B4B5; 30 } 31 32 .products { 33 margin:5px; 34 background-color : #CCDB7C ; border-radius: 8px; 35 } 36 .products span{ 37 display:inline-block; 38 width:70px; 39 } 40 .product_button { 41 border: none; 42 background-color: #4C92FF; 43 border-radius: 10px; 44 width: 80px; 45 color: #FFFBA9; 46 -webkit-transition: background-color .4s ease-in-out 0s, opacity .4s; 47 -o-transition: background-color .4s ease-in-out 0s, opacity .4s; 48 transition: background-color .4s ease-in-out 0s, opacity .4s; 49 } 50 .product_button:hover { 51 background-color: #FF6BB0; 52 -webkit-opacity: 0.4; 53 opacity: 0.4; 54 } 55 56 57 .products img { vertical-align:middle} 58 59 /** cart div */ 60 #cart { 61 position:relative; 62 left:700px; top:-420px; 63 width:600px; 64 height:400px; 65 background-color:#FFE1AA; 66 border-radius: 10px; 67 } 68 69 .items { 70 margin: 5px; 71 background-color: #BBE0FF; 72 border-radius: 8px; 73 -webkit-transition: background-color 1s linear; 74 -o-transition: background-color 1s linear; 75 transition: background-color 1s linear; 76 } 77 .items:active { 78 background-color: #E93A3D; 79 } 80 81 .items span { display:inline ; width:80px; 82 } 83 .items img{ 84 vertical-align:middle; 85 } 86 .items button { 87 border:none ; background-color:#FF4473; border-radius: 10px; color:#D9D9D9; width:23px; 88 } 89 .items input { 90 border:none ; background-color:#C9FFE5; border-radius: 10px; color:#E51B8C; text-indent:10px; max-width:40px; 91 } 92 93 94 95 96 </style> 97 98 <script src="cart.js"></script> 99 100 </head>101 102 <body>103 <div id="header"><span>图像</span><span>名称</span><span>价格</span></div>104 <div><span class="tol">总价是：<label id="money">0</label>元</span></div>105 <div id="wrap">106 <div class="products">107 <span ><img src="img/1.png"></span><span>悠嘻猴</span><span>20</span><span><button class="product_button">buy</button></span>108 </div>109 <div class="products">110 <span ><img src="img/2.png"></span><span>蓝天</span><span>30</span><span><button class="product_button">buy</button></span>111 </div>112 <div class="products">113 <span ><img src="img/3.png"></span><span>美女</span><span>70</span><span><button class="product_button">buy</button></span>114 </div>115 <div class="products">116 <span ><img src="img/4.png"></span><span>画像</span><span>10</span><span><button class="product_button">buy</button></span>117 </div>118 <div class="products">119 <span ><img src="img/5.png"></span><span>小盆友</span><span>50</span><span><button class="product_button">buy</button></span>120 </div>121 </div>122 123 <hr>124 125 <div id="cart">126 127 128 129 </div>130 </body>131 </html>
JS:
1 // JavaScript Document 2 3 function $(id) { 4 return document.getElementById(id); 5 } 6 7 function $$(name) { 8 return document.createElement(name); 9 } 10 11 window.onload = function() { 12 var buys = document.getElementsByClassName(‘product_button‘); 13 for(var i = 0 ; i<buys.length ; i++ ) { 14 buys[i].onclick = function() { 15 var price = this.parentNode.previousSibling; 16 var name = this.parentNode.previousSibling.previousSibling; 17 var img = this.parentNode.previousSibling.previousSibling.previousSibling; 18 //判断该元素是否存在于购物车中 19 if(checkIsInCart(name)){ 20 //alert(‘此物品已在购物车中！‘); 21 22 return; 23 } 24 //添加物品于购物车 25 createItem( price.cloneNode(true) , name.cloneNode(true) , img.cloneNode(true) ); 26 } 27 } 28 29 } 30 31 //判断物品是否存在于购物车中 32 function checkIsInCart(name){ 33 var cart=document.getElementsByClassName(‘items‘); 34 for(var i=0;i<cart.length;i++){ 35 if(cart[i].firstChild.nextSibling.innerHTML==name.innerHTML) 36 return true; 37 } 38 return false; 39 } 40 41 //创建购物车的元素 42 function createItem( price , name , img ) { 43 var items = $$(‘div‘); 44 items.className = ‘items‘; 45 items.appendChild(img); 46 items.appendChild(name); 47 items.appendChild(price); 48 /*创建控制区*/ 49 var control_span = $$(‘span‘); 50 var minus = $$(‘button‘); 51 minus.value = ‘-‘ 52 minus.innerHTML = ‘-‘; 53 minus.onclick = changeItemAmount; 54 55 var count = $$(‘input‘); 56 count.maxLength = 3;//注意小写maxlength就是错的 57 count.value = 1 ; 58 count.onchange = getItemTotal; 59 60 var add = $$(‘button‘); 61 add.value = ‘+‘; 62 add.innerHTML = ‘+‘; 63 add.onclick = changeItemAmount; 64 65 control_span.appendChild(minus); 66 control_span.appendChild(count); 67 control_span.appendChild(add); 68 69 items.appendChild(control_span); 70 71 var item_total = $$(‘span‘); 72 item_total = price.cloneNode(true); 73 74 items.appendChild(item_total); 75 76 $(‘cart‘).appendChild(items); 77 78 getTotal(); 79 } 80 81 //数量增加或减少所触发的事件 82 function changeItemAmount() { 83 var type = this.value; // + - 84 var amount; //数量框 85 //++++++++++++++++++++++++++++++++++++++ 86 if(type==‘+‘) { 87 this.previousSibling.previousSibling.disabled=false; 88 var amount = this.previousSibling; 89 var curr_value = parseInt(amount.value) + 1; 90 amount.value = curr_value; 91 92 var price = this.parentNode.previousSibling.firstChild.nodeValue; 93 this.parentNode.nextSibling.innerHTML = amount.value * price ; 94 } 95 //------------------------------------------- 96 if(type==‘-‘) { 97 var amount = this.nextSibling; 98 var curr_value = parseInt(amount.value) - 1; 99 if(curr_value<0){100 this.disabled=true;101 return;102 }103 amount.value = curr_value;104 105 var price = this.parentNode.previousSibling.firstChild.nodeValue;106 this.parentNode.nextSibling.innerHTML = amount.value * price ;107 }108 109 getTotal();110 }111 112 //数量改变时所触发的事件113 function getItemTotal() {114 var amount = parseInt( this.value) ;115 var price = this.parentNode.previousSibling.firstChild.nodeValue;116 this.parentNode.nextSibling.innerHTML = amount * price ;117 getTotal();118 }119 120 //循环获取购物车的总价121 function getTotal() {122 var cart=document.getElementsByClassName(‘items‘);123 var money=0;124 for(var i=0;i<cart.length;i++){125 money+=parseInt(cart[i].lastChild.innerHTML);126 }127 $(‘money‘).innerHTML=money;128 }
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。