利用js实现一个简单的购物车功能

零下一度

发布时间：2017-06-19 09:25:08

2508人浏览过

来源于php中文网

原创

这篇文章主要为大家分享了js简易版的购物车，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了js购物车功能的具体代码，供大家参考，具体内容如下

<!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('list');
        var aLi = oList.getElementsByTagName('li');
        var oBus = document.getElementById('bus');

        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('p');
            ev.dataTransfer.setData('title', aP[0].innerHTML);
            ev.dataTransfer.setData('price', 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('title');
          var price = ev.dataTransfer.getData('price');  

          if(!obj[title]){

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

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

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

            oBus.appendChild(oP);

            obj[title] = 1;
          }else{
            var box1 = document.getElementsByClassName('box1');
            var box2 = document.getElementsByClassName('box2');
            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('p');
            allMoney.id = 'allMoney';
          }
          iNum += parseInt(price);
          allMoney.innerHTML = '￥'+iNum;
          oBus.appendChild(allMoney);
        };
      };
    </script>
  </head>

  <body>
    <ul id="list">
      <li draggable="true">
        @@##@@
        <p>javascript语言精粹</p>
        <p>40￥</p>
      </li>
      <li draggable="true">
        @@##@@
        <p>javascript权威指南</p>
        <p>120￥</p><div class="aritcle_card flexRow">
                                                        <div class="artcardd flexRow">
                                                                <a class="aritcle_card_img" href="/xiazai/code/11186" title="换物网站源码"><img
                                                                                src="https://img.php.cn/upload/webcode/000/000/002/176526180422304.jpg" alt="换物网站源码"  onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
                                                                <div class="aritcle_card_info flexColumn">
                                                                        <a href="/xiazai/code/11186" title="换物网站源码">换物网站源码</a>
                                                                        <p>一个基于ASP.NET+MSSQL实现的网站源码，包含一个网站的后台管理、前面展示、留言等常用功能，简单而功能完整，具有相当的学习意义。 采用面向对象模式开发，暂时没有超级管理员管理后台</p>
                                                                </div>
                                                                <a href="/xiazai/code/11186" title="换物网站源码" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
                                                        </div>
                                                </div>
      </li>
      <li draggable="true">
        @@##@@
        <p>精通javascript</p>
        <p>35￥</p>
      </li>
      <li draggable="true">
        @@##@@
        <p>DOM编程艺术</p>
        <p>45￥</p>
    </ul>
    <p id="bus"></p>
  </body>

</html>