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 相关文章推荐
Javascript实例教程(19) 使用HoTMetal(5)
Dec 23 Javascript
JavaScript 撑出页面文字换行
Jun 15 Javascript
一些常用且实用的原生JavaScript函数
Sep 08 Javascript
document.getElementById介绍
Sep 13 Javascript
使用jQuery将多条数据插入模态框的实现代码
Oct 08 Javascript
Node.js事件驱动
Jun 18 Javascript
基于jQuery全屏焦点图左右切换插件responsiveslides
Sep 07 Javascript
JavaScript编程中布尔对象的基本使用
Oct 25 Javascript
Angular2学习教程之TemplateRef和ViewContainerRef详解
May 25 Javascript
浅谈JS和jQuery的区别
Mar 27 jQuery
一起写一个即插即用的Vue Loading插件实现
Oct 31 Javascript
JavaScript DOM常用操作代码汇总
Jul 03 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
example1.php
2006/10/09 PHP
Blitz templates 最快的PHP模板引擎
2010/04/06 PHP
php快速url重写 更新版[需php 5.30以上]
2010/04/20 PHP
在PHP中操作Excel实例代码
2010/04/29 PHP
php获取用户IPv4或IPv6地址的代码
2012/11/15 PHP
php缓存技术详细总结
2013/08/07 PHP
php编写批量生成不重复的卡号密码代码
2015/05/14 PHP
js实现双向链表互联网机顶盒实战应用实现
2011/10/28 Javascript
利用js读取动态网站从服务器端返回的数据
2014/02/10 Javascript
学习JavaScript设计模式之享元模式
2016/01/18 Javascript
jQuery遍历DOM元素与节点方法详解
2016/04/14 Javascript
JS函数多个参数默认值指定方法分析
2016/11/28 Javascript
Bootstrap的基本应用要点浅析
2016/12/19 Javascript
JavaScript实现精美个性导航栏筋斗云效果
2017/10/29 Javascript
Node.js模块全局安装路径配置方法
2018/05/17 Javascript
微信小程序位置授权处理方法
2019/06/13 Javascript
vue cli3 配置proxy代理无效的解决
2019/10/30 Javascript
JS数组属性去重并校验重复数据
2020/01/10 Javascript
在Vue中使用HOC模式的实现
2020/08/23 Javascript
Python操作SQLite简明教程
2014/07/10 Python
Django使用Mysql数据库已经存在的数据表方法
2018/05/27 Python
python爬虫之urllib,伪装,超时设置,异常处理的方法
2018/12/19 Python
python 怎样将dataframe中的字符串日期转化为日期的方法
2019/09/26 Python
python爬虫模拟浏览器访问-User-Agent过程解析
2019/12/28 Python
python实现俄罗斯方块小游戏
2020/04/24 Python
python实现秒杀商品的微信自动提醒功能(代码详解)
2020/04/27 Python
Pytorch实现将模型的所有参数的梯度清0
2020/06/24 Python
手对手的教你用canvas画一个简单的海报的方法示例
2018/12/10 HTML / CSS
html5 拖拽及用 js 实现拖拽功能的示例代码
2020/10/23 HTML / CSS
The Hut德国站点:时装、家居用品、美容等
2016/09/23 全球购物
Ajax主要包含了哪些技术
2014/06/12 面试题
仓库规划计划书
2014/04/28 职场文书
小学先进集体事迹材料
2014/05/31 职场文书
2014年学校党建工作总结
2014/11/11 职场文书
分家协议书范本
2016/03/22 职场文书
Redis Cluster 集群搭建你会吗
2021/08/04 Redis