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 相关文章推荐
不错的一个日期输入 动态
Nov 06 Javascript
jquery 事件冒泡的介绍以及如何阻止事件冒泡
Dec 25 Javascript
深入理解JavaScript系列(19):求值策略(Evaluation strategy)详解
Mar 05 Javascript
jQuery实现类似标签风格的导航菜单效果代码
Aug 25 Javascript
JS仿淘宝实现的简单滑动门效果代码
Oct 14 Javascript
javascript学习指南之回调问题
Apr 23 Javascript
JavaScript实现清空(重置)文件类型INPUT元素值的方法
Nov 17 Javascript
JS+H5 Canvas实现时钟效果
Jul 20 Javascript
vue3.0 CLI - 3.2 路由的初级使用教程
Sep 20 Javascript
详解keep-alive + vuex 让缓存的页面灵活起来
Apr 19 Javascript
vue配置nprogress实现页面顶部进度条
Sep 21 Javascript
JS实现动态无缝轮播
Jan 11 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
同时提取多条新闻中的文本一例
2006/10/09 PHP
Ajax PHP 边学边练 之三 数据库
2009/11/26 PHP
优化php效率,提高php性能的一些方法
2011/03/24 PHP
php中通过正则表达式下载内容中的远程图片的函数代码
2012/01/10 PHP
php中文繁体和简体相互转换的方法
2015/03/21 PHP
PHP的mysqli_stmt_init()函数讲解
2019/01/24 PHP
Code: write(s,d) 输出连续字符串
2007/08/19 Javascript
不能再简单的无闪刷新验证码原理很简单
2007/11/05 Javascript
cookie丢失问题(认证失效) Authentication (用户验证信息)也会丢失
2009/06/04 Javascript
兼容IE、FireFox、Chrome等浏览器的xml处理函数js代码
2011/11/30 Javascript
Asp.Net alert弹出提示信息的几种方法总结
2014/01/29 Javascript
一个CSS+jQuery实现的放大缩小动画效果
2014/02/19 Javascript
Javascript 数组排序详解
2014/10/22 Javascript
jQuery在线选座位插件seat-charts特效代码分享
2015/08/27 Javascript
JavaScript+CSS实现的可折叠二级菜单实例
2016/02/29 Javascript
jQuery实现的可编辑表格完整实例
2016/06/20 Javascript
基于bootstrop常用类总结(推荐)
2017/09/11 Javascript
jQuery easyui datagird编辑行删除行功能的实现代码
2018/09/20 jQuery
Vuepress 搭建带评论功能的静态博客的实现
2019/02/17 Javascript
抖音上用记事本编写爱心小程序教程
2019/04/17 Javascript
python根据文件大小打log日志
2014/10/09 Python
Python编写屏幕截图程序方法
2015/02/18 Python
python docx 中文字体设置的操作方法
2018/05/08 Python
对python数据切割归并算法的实例讲解
2018/12/12 Python
Python响应对象text属性乱码解决方案
2020/03/31 Python
html5使用canvas实现图片下载功能的示例代码
2017/08/26 HTML / CSS
加拿大休闲和工业服装和鞋类零售商:L’Équipeur
2018/01/12 全球购物
Delphi软件工程师试题
2013/01/29 面试题
竞职演讲稿范文
2014/01/11 职场文书
论文指导教师评语
2014/04/28 职场文书
企业环保标语
2014/06/10 职场文书
十佳家长事迹材料
2014/08/26 职场文书
实现中国梦思想汇报2014
2014/09/13 职场文书
欠条范文
2015/07/03 职场文书
2016母亲节感恩话语
2015/12/09 职场文书
Java基础之线程锁相关知识总结
2021/06/30 Java/Android