简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Maison
Article
Questions et réponses
Cours
Sujet
Télécharger
Jeu
Dictionnaire
mises à jour récentes

Maison  >  Questions et réponses  >  le corps du texte

javascript - Quel est le principe sous-jacent du JS pour le panier d'achat?

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)

習慣沉默習慣沉默2733 Il y a quelques jours648

répondre à tous(3)je répondrai

  • 淡淡烟草味

    淡淡烟草味2017-05-19 10:38:16

    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>

    répondre
    0
  • 天蓬老师

    天蓬老师2017-05-19 10:38:16

    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

    répondre
    0
  • phpcn_u1582

    phpcn_u15822017-05-19 10:38:16

    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.

    répondre
    0
  • Annulerrépondre