Maison > Article > interface Web > Utilisez js pour implémenter une fonction de panier simple

Utilisez js pour implémenter une fonction de panier simple

零下一度original: 2017-06-19 09:25:082228parcourir

Cet article partage principalement avec vous la version js simple du panier, qui a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

L'exemple dans cet article partage avec vous la fonction de panier js. Le code spécifique est pour votre référence. Le contenu spécifique est le suivant

<!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8">
    <title></title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      li {
        list-style: none;
      }

      li {
        float: left;
        width: 200px;
        border: 1px #000 solid;
        margin: 10px;
      }

      li img {
        width: 200px;
      }

      p {
        height: 20px;
        border-bottom: 1px #333 dashed;
      }

      #bus {
        width: 600px;
        border: 1px #000 solid;
        height: 300px;
        clear: both;
      }

      .box1 {
        float: left;
        width: 200px;
      }

      .box2 {
        float: left;
        width: 200px;
      }

      .box3 {
        float: left;
        width: 200px;
      }

      #allMoney {
        float: right;
      }
    </style>
    <script>
      window.onload = function() {
        var oList = document.getElementById(&#39;list&#39;);
        var aLi = oList.getElementsByTagName(&#39;li&#39;);
        var oBus = document.getElementById(&#39;bus&#39;);

        var obj = {};
        var iNum = 0;
        var allMoney = 0;

        for (var i = 0; i < aLi.length; i++) {
          aLi[i].ondragstart = function(ev) {
            //点击拖拽元素的时候，就设置数据，以后放到购物车的时候数据就可以传过去了
            var ev = ev || window.event;
            var aP = this.getElementsByTagName(&#39;p&#39;);
            ev.dataTransfer.setData(&#39;title&#39;, aP[0].innerHTML);
            ev.dataTransfer.setData(&#39;price&#39;, aP[1].innerHTML);
            ev.dataTransfer.setDragImage(this, 0, 0);
          }
        }

        oBus.ondragover = function(ev) {
          //阻止鼠标默认事件
          var ev = ev || event;
          ev.preventDefault();
        };
        oBus.ondrop = function(ev) {
          var ev = ev || event;
          var title = ev.dataTransfer.getData(&#39;title&#39;);
          var price = ev.dataTransfer.getData(&#39;price&#39;);  

          if(!obj[title]){

            var oP = document.createElement(&#39;p&#39;);
            var oSpan = document.createElement(&#39;span&#39;);
            oSpan.className = &#39;box1&#39;;
            oSpan.innerHTML = 1;
            oP.appendChild(oSpan);

            var oSpan = document.createElement(&#39;span&#39;);
            oSpan.className = &#39;box2&#39;;
            oSpan.innerHTML = title;
            oP.appendChild(oSpan);

            var oSpan = document.createElement(&#39;span&#39;);
            oSpan.className = &#39;box3&#39;;
            oSpan.innerHTML = price;
            oP.appendChild(oSpan);

            oBus.appendChild(oP);

            obj[title] = 1;
          }else{
            var box1 = document.getElementsByClassName(&#39;box1&#39;);
            var box2 = document.getElementsByClassName(&#39;box2&#39;);
            for(var i=0;i<box2.length;i++){
              if(box2[i].innerHTML == title){
                box1[i].innerHTML = parseInt(box1[i].innerHTML) + 1;
              };
            };

          };
          //总价
          if(!allMoney){
            allMoney = document.createElement(&#39;p&#39;);
            allMoney.id = &#39;allMoney&#39;;
          }
          iNum += parseInt(price);
          allMoney.innerHTML = &#39;￥&#39;+iNum;
          oBus.appendChild(allMoney);
        };
      };
    </script>
  </head>

  <body>
    <ul id="list">
      <li draggable="true">
        <img src="img/img1.jpg" />
        <p>javascript语言精粹</p>
        <p>40￥</p>
      </li>
      <li draggable="true">
        <img src="img/img2.jpg" />
        <p>javascript权威指南</p>
        <p>120￥</p>
      </li>
      <li draggable="true">
        <img src="img/img3.jpg" />
        <p>精通javascript</p>
        <p>35￥</p>
      </li>
      <li draggable="true">
        <img src="img/img4.jpg" />
        <p>DOM编程艺术</p>
        <p>45￥</p>
    </ul>
    <p id="bus"></p>
  </body>

</html>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Explication détaillée de la définition jquery ajax et exemples d'utilisationArticle suivant：Explication détaillée de la définition jquery ajax et exemples d'utilisation

Articles Liés

Voir plus