js简易版购物车功能

转载  2017-06-17   作者:yesbuy201701   我要评论

这篇文章主要为大家分享了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('div');
            allMoney.id = 'allMoney';
          }
          iNum += parseInt(price);
          allMoney.innerHTML = '¥'+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>
    <div id="bus"></div>
  </body>

</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • javascript HTML5 Canvas实现圆盘抽奖功能

    javascript HTML5 Canvas实现圆盘抽奖功能

    这篇文章主要为大家详细介绍了javascript HTML5 Canvas实现圆盘抽奖功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-04-04
  • switchery按钮的使用方法

    switchery按钮的使用方法

    下面小编就为大家分享一篇switchery按钮的使用方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2017-12-12
  • Javascript中3个需要注意的运算符

    Javascript中3个需要注意的运算符

    这篇文章主要介绍了Javascript中3个需要注意的运算符,这3个运算符的使用有很多需要注意的地方和有意思的地方,需要的朋友可以参考下
    2015-04-04
  • js/jquery获取文本框输入焦点的方法

    js/jquery获取文本框输入焦点的方法

    本篇文章主要是对js/jquery获取文本框输入焦点的方法进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-03-03
  • javascript 自定义常用方法

    javascript 自定义常用方法

    在实际的js开发过程中,我们常常会有相似或相同的需求。这时候如果没有很好的封装(通用功能),代码的重复将不可避免。
    2009-08-08
  • JS身份证信息验证正则表达式

    JS身份证信息验证正则表达式

    很多时候我们都是通过一组正则表达式来判断用户输入的身份证是否合法,那在用正则表达式判断之前,首先要做到的是对身份证信息的一些效验规则
    2017-06-06
  • JavaScript判断图片是否已经加载完毕的方法汇总

    JavaScript判断图片是否已经加载完毕的方法汇总

    在网上有很多关于判断图片是否已经加载完毕的文章,但是有的浏览器并不适合,下面小编给大家分享一些有关JavaScript判断图片是否已经加载完毕的方法汇总,需要的朋友参考下
    2016-02-02
  • JavaScript中值类型与引用类型实例说明

    JavaScript中值类型与引用类型实例说明

    JavaScript中值类型与引用类型说明,需要的朋友可以参考下。
    2010-12-12
  • javascript 缓冲运动框架的实现

    javascript 缓冲运动框架的实现

    这篇文章主要介绍了javascript 缓冲运动框架的实现的相关资料,希望通过本能帮助到大家,实现这样类似的功能,需要的朋友可以参考下
    2017-09-09
  • 关于验证码在IE中不刷新的快速解决方法

    关于验证码在IE中不刷新的快速解决方法

    下面小编就为大家带来一篇关于验证码在IE中不刷新的快速解决方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-09-09

最新评论