communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
javascript - Quel est le principe sous-jacent du JS pour le panier d'achat?
習慣沉默
習慣沉默 2017-05-19 10:36:16
0
3
668

1. Quel est le principe sous-jacent du panier ? Comment compléter les statistiques ?
2. Utilisez les paramètres de la fonction pour créer la première moitié. Comment implémenter la seconde moitié ?
3. Le code est le suivant : 

     <!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>网页标题</title>
  <style>
    li{margin-top:20px;}
  </style>
  <script>
    window.onload = function (){
        var box = document.getElementById("box");
        var aLi = box.getElementsByTagName("li");
        //var oU = document.getElementsByTagName("u");
        function fn(li){
            var aBtn = li.getElementsByTagName("input");
            var oSpan =li.getElementsByTagName("span")[0];
            var oI = li.getElementsByTagName("i")[0];
            var oB = li.getElementsByTagName("b")[0];

            aBtn[1].onclick = function(){
                oSpan.innerHTML++;
                oB.innerHTML = oSpan.innerHTML*oI.innerHTML;
            }
            aBtn[0].onclick = function(){
                if(oSpan.innerHTML>0){
                    oSpan.innerHTML--;
                }
                oB.innerHTML = oSpan.innerHTML*oI.innerHTML;
                }
            }
        
        for(var i=0;i<aLi.length;i++){
            fn(aLi[i]);
            //
        }
    

    }//js最后执行
  </script>
 </head>
 <body>
    <ul id="box">
        <li>
            <input type="button" value="-">
            <span>0</span>
            <input type="button" value="+">
            单价：<i>10</i>元
            小计：<b>0</b>元
        </li>
        <li>
            <input type="button" value="-">
            <span>0</span>
            <input type="button" value="+">
            单价：<i>7.5</i>元
            小计：<b>0</b>元
        </li> 
        <li>
            <input type="button" value="-">
            <span>0</span>
            <input type="button" value="+">
            单价：<i>15</i>元
            小计：<b>0</b>元
        </li> 
        <li>
            <input type="button" value="-">
            <span>0</span>
            <input type="button" value="+">
            单价：<i>20</i>元
            小计：<b>0</b>元
        </li> 
        <li>
            <input type="button" value="-">
            <span>0</span>
            <input type="button" value="+">
            单价：<i>150</i>元
            小计：<b>0</b>元
        </li>
        
    </ul>
 </body>
</html>

La partie suivante : Il y a n pièces de produits au total, le prix unitaire du produit le plus cher est un yuan, comment écrire la partie qui coûte b yuans au total ?
Comment attribuer des valeurs aux variables et compter la somme finale des données ?
(Le code et les photos ont été publiés)

習慣沉默
習慣沉默

répondre à tous(3)
淡淡烟草味
淡淡烟草味2017-05-19 10:38:16 3 plancher

Je publierai tout le code. Jetez un oeil 

   <!doctype html>
    <html>
     <head>
      <meta charset="UTF-8">
      <title>网页标题</title>
      <style>
        li{margin-top:20px;}
      </style>
      <script>
        window.onload = function (){
            // var box = document.getElementById("box");
            // var aLi = box.getElementsByTagName("li");
            // //var oU = document.getElementsByTagName("u");
            // function fn(li){
            //     var aBtn = li.getElementsByTagName("input");
            //     var oSpan =li.getElementsByTagName("span")[0];
            //     var oI = li.getElementsByTagName("i")[0];
            //     var oB = li.getElementsByTagName("b")[0];
    
            //     aBtn[1].onclick = function(){
            //         oSpan.innerHTML++;
            //         oB.innerHTML = oSpan.innerHTML*oI.innerHTML;
            //     }
            //     aBtn[0].onclick = function(){
            //         if(oSpan.innerHTML>0){
            //             oSpan.innerHTML--;
            //         }
            //         oB.innerHTML = oSpan.innerHTML*oI.innerHTML;
            //     }
            // }
            
            // for(var i=0;i<aLi.length;i++){
            //     fn(aLi[i]);
            //     counttotal()
            //     //
            // }
    
            //总和变量
            var total = 0;
            //单价最贵数组
            var mostexp = [];
            //dom 节点
            var box = document.getElementById("box");
            var aLi = box.getElementsByTagName("li");
            var idom = box.getElementsByTagName('i');
            //单价最高
            for(var i=0;i<idom.length;i++){
                mostexp.push(+idom[i].innerHTML)
            }
            document.getElementById('j-exp').innerHTML = Math.max.apply(null,mostexp)
            //绑定加减事件
            function fn(li){
                var oSpan =li.getElementsByTagName("span")[0];
                var oI = li.getElementsByTagName("i")[0];
                var oB = li.getElementsByTagName("b")[0];
                var aBtn = li.getElementsByTagName("input");
    
                for(var i=0,len=aBtn.length;i<len;i++){
                    if(i===0){
                        aBtn[i].onclick = function(){
                            if(oSpan.innerHTML>0){
                                oSpan.innerHTML--;
                            }
                            oB.innerHTML = oSpan.innerHTML*oI.innerHTML;
                            counttotal()
                        }
                    }else{
                        aBtn[i].onclick = function(){
                            oSpan.innerHTML++;
                            oB.innerHTML = oSpan.innerHTML*oI.innerHTML;
                            counttotal()
                        }
                    }
                }    
            }
    
            for(var i=0;i<aLi.length;i++){
                fn(aLi[i]);
            }

            //计算总和
            function counttotal(){
                total = 0;
                var getb = document.getElementsByTagName('b');    
                for(var i=0,len=getb.length;i<len;i++){
                    total+= +getb[i].innerHTML
                }
                document.getElementById('j-total').innerHTML = total
            }
            
        }//js最后执行
      </script>
     </head>
     <body>
        <ul id="box">
            <li>
                <input type="button" value="-">
                <span>0</span>
                <input type="button" value="+">
                单价：<i>10</i>元
                小计：<b>0</b>元
            </li>
            <li>
                <input type="button" value="-">
                <span>0</span>
                <input type="button" value="+">
                单价：<i>7.5</i>元
                小计：<b>0</b>元
            </li> 
            <li>
                <input type="button" value="-">
                <span>0</span>
                <input type="button" value="+">
                单价：<i>15</i>元
                小计：<b>0</b>元
            </li> 
            <li>
                <input type="button" value="-">
                <span>0</span>
                <input type="button" value="+">
                单价：<i>20</i>元
                小计：<b>0</b>元
            </li> 
            <li>
                <input type="button" value="-">
                <span>0</span>
                <input type="button" value="+">
                单价：<i>150</i>元
                小计：<b>0</b>元
            </li>
            
        </ul>
        <!-- 变化 -->
        <p>单价最高：<span id="j-exp">0</span>元</p>
        <p>总计：<span id="j-total">0</span>元</p>
        <!-- 变化 -->
     </body>
    </html>
Comme +0
Ajouter une réponse
Peter_Zhu
Peter_Zhu2017-05-19 10:38:16 2 plancher

C'est parfait pour écrire un panier en utilisant la méthode orientée objet. Voici le code es6

. 
class Cart{
    constructor(){
        //set，map，array，随你选
        this.list = [];
    }
    //将商品加入购物车，需要判断购物车内是否有该商品，
    //以及商品规格是否相同
    add(goods){}
    //将商品移除购物车,这个key可以是id，名称等等，你自己决定
    remove(key){}
    //计算购物车总价，当然，最贵的当然可以计算出来了，排个序就号了
    computeMoney(){}
    //保存购物车，localstorage,服务器，你自己决定，保存之后还是之前更新界面还是你决定
    save(){}
    //清空购物车
    clear(){}
    //购物车是否为空
    isEmpty(){}
    //更多逻辑.......
}

Il est préférable d'ajouter des fonctions hook (onSave, onAdd, onRemove....) à chaque méthode pour réaliser la réutilisation et le découplage

Comme +0
Ajouter une réponse
phpcn_u1582
phpcn_u15822017-05-19 10:38:16 1 plancher

Le principe est que lorsque l'utilisateur clique sur le signe plus sur la page de sélection du produit, les données sont obtenues à partir de la source de données et placées dans un nouveau tableau

var data=res.data;
var shopCar=[];
add(index){//点击加号的时候
    shopCar[index]=data[index] 
}

Ensuite, récupérez un nouvel objet tableau, qui est la liste du panier.
Les statistiques consistent à additionner les champs de prix dans l'objet tableau. Quant à la méthode que vous utilisez pour additionner, cela dépend de vos préférences.

S'il y a un signe moins, il doit également y avoir une opération de soustraction correspondante.

Comme +0
Ajouter une réponse
Sujets populaires
Plus>
Articles populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal