首页 > 文章 > web前端 > 利用js实现一个简单的购物车功能

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

零下一度原创: 2017-06-19 09:25:082211浏览

这篇文章主要为大家分享了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(&#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>

以上是利用js实现一个简单的购物车功能的详细内容。更多信息请关注PHP中文网其他相关文章！

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：jquery ajax定义与用法实例详解下一篇：Webpack引入bootstrap方法实例详解

查看更多