购物车的高级实现逻辑结构清晰

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>

View Code

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 }

View Code

相关阅读:
Linux用root强制踢掉已登录用户；用fail2ban阻止ssh暴力破解root密码
 JDBC开发
 JSP指令与动作元素
 Jsp——状态管理
 JavaBeans
JSP——九大内置对象
 Jsp基础语法
 WEB-INF目录结构
 JavaWeb简介
 UML——初识
原文地址：https://www.cnblogs.com/dashen/p/3900198.html

购物车的高级实现 逻辑结构清晰

购物车的高级实现逻辑结构清晰