Home > Article > Web Front-end > Javascript implements simple version of shopping cart function

Javascript implements simple version of shopping cart function

陈政宽～Original: 2017-06-28 11:48:592028browse

This article mainly shares with you the js simple version of the shopping cart, which has certain reference value. Interested friends can refer to it

The example in this article shares with you the js shopping cart function. The specific code is for your reference. The specific content is as follows

<!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>

The above is the entire content of this article. I hope it will be helpful to everyone's study, and I also hope that everyone will support Script Home.

The above is the detailed content of Javascript implements simple version of shopping cart function. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：JavaScript implements message board functionNext article：JavaScript implements message board function

See more

Javascript implements simple version of shopping cart function

Related articles