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 相关文章推荐
JQuery jsonp 使用示例代码
Aug 12 Javascript
MC Dialog js弹出层 完美兼容多浏览器(5.6更新)
May 06 Javascript
jquery选择器(常用选择器说明)
Sep 28 Javascript
下载文件个别浏览器文件名乱码解决办法
Mar 19 Javascript
关于jQuery对象数据缓存Cache原理以及jQuery.data详解
Apr 07 Javascript
JavaScript使用replace函数替换字符串的方法
Apr 06 Javascript
纯js实现页面返回顶部的动画(超简单)
Aug 10 Javascript
axios发送post请求,提交图片类型表单数据方法
Mar 16 Javascript
vue.js的vue-cli脚手架中使用百度地图API的实例
Jan 21 Javascript
使用vue for时为什么要key【推荐】
Jul 11 Javascript
解决layer弹出层的内容页点击按钮跳转到新的页面问题
Sep 14 Javascript
小程序自动化测试的示例代码
Aug 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
漫威DC即将合作联动,而双方早已经秘密开始
2020/04/09 欧美动漫
php 文件夹删除、php清除缓存程序
2009/08/25 PHP
给初学者的30条PHP最佳实践(荒野无灯)
2011/08/02 PHP
php分页函数完整实例代码
2014/09/22 PHP
详解php命令注入攻击
2019/04/06 PHP
30个最好的jQuery 灯箱插件分享
2011/04/25 Javascript
document.getElementById介绍
2011/09/13 Javascript
通过JS自动隐藏手机浏览器的地址栏实现原理与代码
2013/01/02 Javascript
JS保留两位小数 四舍五入函数的小例子
2013/11/20 Javascript
小结Node.js中非阻塞IO和事件循环
2014/09/18 Javascript
node.js中的fs.readlink方法使用说明
2014/12/17 Javascript
jQuery中:image选择器用法实例
2015/01/03 Javascript
深入理解JavaScript系列(31):设计模式之代理模式详解
2015/03/03 Javascript
jQuery实现企业网站横幅焦点图切换功能实例
2015/04/30 Javascript
实例详解angularjs和ajax的结合使用
2015/10/22 Javascript
js实现复选框的全选和取消全选效果
2017/01/03 Javascript
简单实现js选项卡切换效果
2017/02/09 Javascript
template.js前端模板引擎使用详解
2017/10/10 Javascript
JS闭包原理与应用经典示例
2018/12/20 Javascript
vue图片上传组件使用详解
2019/12/23 Javascript
[00:09]DOTA2全国高校联赛 精彩活动引爆全场
2018/05/30 DOTA
[13:25]VP vs VICI (BO3)
2018/06/07 DOTA
Python yield 使用浅析
2015/05/28 Python
Python实现Smtplib发送带有各种附件的邮件实例
2017/06/05 Python
对pandas进行数据预处理的实例讲解
2018/04/20 Python
在Django的View中使用asyncio的方法
2019/07/12 Python
Python使用grequests(gevent+requests)并发发送请求过程解析
2019/09/25 Python
Python常见反爬虫机制解决方案
2020/06/01 Python
详解Java中一维、二维数组在内存中的结构
2021/02/11 Python
详解html5 postMessage解决跨域通信的问题
2018/08/17 HTML / CSS
SQL面试题
2013/04/30 面试题
测绘工程个人的自我评价
2013/11/10 职场文书
党员学习十八大感想
2014/01/17 职场文书
自动一体化专业求职信
2014/03/15 职场文书
计算机毕业生自荐信范文
2014/03/23 职场文书
缓刑人员思想汇报
2014/10/11 职场文书