js简易版购物车功能


Posted in Javascript onJune 17, 2017

本文实例为大家分享了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 相关文章推荐
一组JS创建和操作表格的函数集合
May 07 Javascript
js实现两个值相加alert出来精确到指定位
Sep 25 Javascript
JavaScript中使用ActiveXObject操作本地文件夹的方法
Mar 28 Javascript
js+jquery实现图片裁剪功能
Jan 02 Javascript
javascript实现类似java中getClass()得到对象类名的方法
Jul 27 Javascript
深入浅析javascript立即执行函数
Oct 23 Javascript
jQuery页面加载初始化的3种方法(推荐)
Jun 02 Javascript
XMLHttpRequest Level 2 使用指南
Aug 26 Javascript
angularJs关于指令的一些冷门属性详解
Oct 24 Javascript
完美解决UI-Grid表格元素中多个空格显示为一个空格的问题
Apr 25 Javascript
vue项目中使用scss的方法步骤
May 16 Javascript
vue项目中自定义video视频控制条的实现代码
Apr 26 Javascript
Webpack如何引入bootstrap的方法
Jun 17 #Javascript
Webpack执行命令参数详解
Jun 17 #Javascript
JS实现留言板功能
Jun 17 #Javascript
利用vscode编写vue的简单配置详解
Jun 17 #Javascript
JavaScript用二分法查找数据的实例代码
Jun 17 #Javascript
JS实现新建文件夹功能
Jun 17 #Javascript
vue-router路由参数刷新消失的问题解决方法
Jun 17 #Javascript
You might like
CodeIgniter生成静态页的方法
2016/05/17 PHP
php制作圆形用户头像的实例_自定义封装类源代码
2017/09/18 PHP
PHP实现的操作数组类库定义与用法示例
2019/05/24 PHP
使用onbeforeunload属性后的副作用
2007/03/08 Javascript
ext实现完整的登录代码
2008/08/08 Javascript
写出更好的JavaScript程序之undefined篇(中)
2009/11/23 Javascript
基于dom编程中 动态创建与删除元素的使用
2013/04/17 Javascript
jQuery仿Excel表格编辑功能的实现代码
2013/05/01 Javascript
javascript写的一个模拟阅读小说的程序
2014/04/04 Javascript
JavaScript获取路径设计源码
2014/05/22 Javascript
HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列
2015/04/26 Javascript
详解js实现线段交点的三种算法
2016/08/09 Javascript
JavaScript交换两个变量值的七种解决方案
2016/12/01 Javascript
angular实现spa单页面应用实例
2017/07/10 Javascript
Vue.js实现输入框绑定的实例代码
2017/08/24 Javascript
Vue.directive()的用法和实例详解
2018/03/04 Javascript
vue translate peoject实现在线翻译功能【新手必看】
2018/06/07 Javascript
JavaScript设计模式之观察者模式(发布订阅模式)原理与实现方法示例
2018/07/27 Javascript
用Object.prototype.toString.call(obj)检测对象类型原因分析
2018/10/11 Javascript
详解vue引入子组件方法
2019/02/12 Javascript
[02:16]卖萌的僵尸 DOTA2神话信使飞僵小宝来袭
2014/03/24 DOTA
[01:48]完美圣典齐天大圣至宝宣传片
2016/12/17 DOTA
pyecharts绘制中国2020肺炎疫情地图的实例代码
2020/02/12 Python
Python中的wordcloud库安装问题及解决方法
2020/05/27 Python
CSS3中currentColor关键字的妙用
2016/02/27 HTML / CSS
英国最大的化装舞会服装网站:Fancydress.com
2017/08/15 全球购物
法国票务网站:Ticketmaster法国
2018/07/09 全球购物
波兰购物网站:MALL.PL
2019/05/01 全球购物
水利公司纪检监察自我鉴定
2014/02/25 职场文书
经济贸易系毕业生求职信
2014/05/31 职场文书
自愿离婚协议书范本
2014/09/13 职场文书
药店采购员岗位职责
2014/09/30 职场文书
卖车协议书范本4篇
2014/10/01 职场文书
民事调解协议书
2016/03/21 职场文书
2016创先争优活动党员公开承诺书
2016/03/24 职场文书
在js中修改html body的样式
2021/11/11 Javascript