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 word表格动态添加代码
Jun 07 Javascript
jQuery中live()方法用法实例
Jan 19 Javascript
jQuery事件绑定on()与弹窗实现代码
Apr 28 Javascript
jquery实现点击弹出可放大居中及关闭的对话框(附demo源码下载)
May 10 Javascript
解决jquery无法找到其他父级子集问题的方法
May 10 Javascript
ionic在开发ios系统微信时键盘挡住输入框的解决方法(键盘弹出问题)
Sep 06 Javascript
js简单正则验证汉字英文及下划线的方法
Nov 28 Javascript
Vue项目webpack打包部署到服务器的实例详解
Jul 17 Javascript
JavaScript 中使用 Generator的方法
Dec 29 Javascript
Angular2使用SVG自定义图表(条形图、折线图)组件示例
May 10 Javascript
js防抖函数和节流函数使用场景和实现区别示例分析
Apr 11 Javascript
vue利用全局导航守卫作登录后跳转到未登录前指定页面的实例代码
May 19 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
PHP学习之PHP运算符
2006/10/09 PHP
Linux环境下php实现给网站截图的方法
2016/05/03 PHP
php获取linux命令结果的实例
2017/03/13 PHP
PHP实践教程之过滤、验证、转义与密码详解
2017/07/24 PHP
php之header的不同用法总结(实例讲解)
2017/11/28 PHP
Yii框架函数简单用法分析
2019/09/09 PHP
javascript prototype 原型链
2009/03/12 Javascript
JQuery小知识
2010/10/15 Javascript
关闭浏览器时提示onbeforeunload事件
2013/12/25 Javascript
jQuery自定义滚动条完整实例
2016/01/08 Javascript
js实现图片加载淡入淡出效果
2017/04/07 Javascript
详解vue+css3做交互特效的方法
2017/11/20 Javascript
Vue自定义指令实现checkbox全选功能的方法
2018/02/28 Javascript
vue自定义指令directive的使用方法
2019/04/07 Javascript
在Webpack中用url-loader处理图片和字体的问题
2020/04/28 Javascript
Python捕捉和模拟鼠标事件的方法
2015/06/03 Python
Python基于checksum计算文件是否相同的方法
2015/07/09 Python
Python实现求一个集合所有子集的示例
2018/05/04 Python
Python读取Excel表格,并同时画折线图和柱状图的方法
2018/10/14 Python
在Pycharm中使用GitHub的方法步骤
2019/06/13 Python
Django中信号signals的简单使用方法
2019/07/04 Python
Django model select的多种用法详解
2019/07/16 Python
python使用百度文字识别功能方法详解
2019/07/23 Python
python提取照片坐标信息的实例代码
2019/08/14 Python
jupyter notebook中美观显示矩阵实例
2020/04/17 Python
Python+unittest+DDT实现数据驱动测试
2020/11/30 Python
HTML5 Canvas标签使用收录
2009/07/07 HTML / CSS
Kate Spade美国官网:纽约新兴时尚品牌,以包包闻名于世
2017/11/09 全球购物
美国最值得信赖的宠物药房:Allivet
2019/03/23 全球购物
Brora官网:英国领先的羊绒服装品牌
2019/08/28 全球购物
经典c++面试题二
2015/08/14 面试题
运动会加油口号
2014/06/07 职场文书
财会专业毕业生自荐信
2014/07/09 职场文书
出纳工作检讨书范文
2014/12/27 职场文书
2016年中学法制宣传日活动总结
2016/04/01 职场文书
Java 轮询锁使用时遇到问题
2022/05/11 Java/Android