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 相关文章推荐
使用按钮控制以何种方式打开新窗口的属性介绍
Dec 17 Javascript
jquery右下角弹出提示框示例代码
Oct 08 Javascript
js数组方法扩展实现数组统计函数
Apr 09 Javascript
学习jQuey中的return false
Dec 18 Javascript
AngularJS 使用$sce控制代码安全检查
Jan 05 Javascript
js滚动条平滑移动示例代码
Mar 29 Javascript
创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件
Jun 02 Javascript
微信小程序 后台https域名绑定和免费的https证书申请详解
Nov 10 Javascript
微信小程序tabBar用法实例详解
Dec 04 Javascript
Webpack优化配置缩小文件搜索范围
Dec 25 Javascript
简单使用webpack打包文件的实现
Oct 29 Javascript
vue + elementUI实现省市县三级联动的方法示例
Oct 29 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
Yii Framework框架获取分类下面的所有子类方法
2014/06/20 PHP
跟我学Laravel之路由
2014/10/15 PHP
PHP对象相关知识总结
2017/04/09 PHP
PHP高效获取远程图片尺寸和大小的实现方法
2017/10/20 PHP
ThinkPHP5&amp;5.1实现验证码的生成、使用及点击刷新功能示例
2020/02/07 PHP
javascript之通用简单的table选项卡实现(二)
2010/05/09 Javascript
jQuery对象数据缓存Cache原理及jQuery.data方法区别介绍
2013/04/07 Javascript
IE6下javasc#ipt:void(0) 无效的解决方法
2013/12/23 Javascript
jqeury-easyui-layout问题解决方法
2014/03/24 Javascript
jquery处理json数据实例分析
2014/06/03 Javascript
原生js编写设为首页兼容ie、火狐和谷歌
2014/06/05 Javascript
给js文件传参数(详解)
2014/07/13 Javascript
Bootstrap开发实战之响应式轮播图
2016/06/02 Javascript
聊一聊jQuery插件uploadify使用方法
2016/08/24 Javascript
jQuery插入节点和移动节点用法示例(insertAfter、insertBefore方法)
2016/09/08 Javascript
js实现仿购物车加减效果
2017/03/01 Javascript
详谈js原型继承的一些问题
2017/09/06 Javascript
基于Require.js使用方法(总结)
2017/10/26 Javascript
vue一个页面实现音乐播放器的示例
2018/02/06 Javascript
环形加载进度条封装(Vue插件版和原生js版)
2019/12/04 Javascript
node 版本切换的实现
2020/02/02 Javascript
微信小程序使用前置摄像头拍照
2020/10/22 Javascript
python 测试实现方法
2008/12/24 Python
python中如何使用正则表达式的非贪婪模式示例
2017/10/09 Python
Python面向对象之Web静态服务器
2019/09/03 Python
Python+OpenCV实现图像的全景拼接
2020/03/05 Python
境外导游求职信
2014/02/27 职场文书
计算机专业自荐信范文
2014/05/28 职场文书
监察局领导班子四风问题整改措施思想汇报
2014/10/05 职场文书
公司放假通知怎么写
2015/04/15 职场文书
创业计划书之都市休闲农庄
2019/12/28 职场文书
Python实现PIL图像处理库绘制国际象棋棋盘
2021/07/16 Python
Win11怎么进入安全模式?Windows 11进入安全模式的方法
2021/11/21 数码科技
微信小程序中使用vant框架的具体步骤
2022/02/18 Javascript
python中的sys模块和os模块
2022/03/20 Python
JavaScript中的LHS和RHS分析详情
2022/04/06 Javascript