js简易版购物车功能

本文实例为大家分享了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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 简单的前端js+ajax 购物车框架(入门篇)

    今天在公司实在没有事做,突然就想到写下商城的购物车的前端框架,当然我这里只有购物车的增删改查,也许写的并不是那么完善,但最重要的是一个入门,也希望js达人给些建议,好让我更上一个台阶. HOHO~~~开始咯: Js: 复制代码 代码如下: //为了省事,就没写自己的js ajax了 用了jquery的,当然你也可以添加到jquery的扩展方法内,哈哈,我太懒了,所以就写这里了. var _$ = { AJAX: function (urlparm, d, beforecall, successc

  • 利用Angularjs和bootstrap实现购物车功能

    先来看看效果图: 购物车 一.代码 如果看了这个效果有兴趣想知道怎么做出来的话,那就继续往下看吧.话不多少,直接上代码. html代码: <!DOCTYPE html> <html lang="en" ng-app="cart"> <head> <meta charset="UTF-8"> <title>购物车</title> <link rel="style

  • 原生js模拟淘宝购物车项目实战

    本文实例讲述了原生js模拟淘宝购物车实现代码.分享给大家供大家参考.具体如下: 通过JavaScript实现类似与淘宝的购物车效果,包括商品的单选.全选.删除.修改数量.价格计算.数目计算.预览等功能的实现.实现的效果图: 相应的代码: shoppingCart.html <!DOCTYPE html> <html> <head> <meta charset = "UTF-8"> <title>JavaScript实现购物车项

  • JavaScript编写一个简易购物车功能

    网上关于购物车实现的代码非常多,今天看了一些知识点,决定自己动手写写,于是写了一个简易购物车,接下来讲解一下具体的实现. 1.用html实现内容: 2.用css修饰外观: 3.用js(jq)设计动效. 第一步:首先是进行html页面的设计,我用一个大的div将所有商品包含,然后用不同的div将不同的商品进行封装,商品列表中我用了ul li实现,具体实现代码如下(代码中涉及到的商品都是网上随便copy的,不具有参考价值): <div id="goods"> <div c

  • 基于Vuejs实现购物车功能

    本文实例为大家分享了Vuejs购物车实现代码,供大家参考,具体内容如下 html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>我的vue购物车</title> <link rel="stylesheet" href="css/bootstrap.min.css&q

  • js实现简单的购物车有图有代码

    如图:  全选按钮的实现为: 复制代码 代码如下: <input type="checkbox" name="all" onclick="checkAll()" />全选<br /> <input type="checkbox" name="item" value="3000" />笔记本电脑:3000元<br /> <input t

  • js购物车实现思路及代码(个人感觉不错)

    复制代码 代码如下: <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServer

  • Javascript操纵Cookie实现购物车程序

    复制代码 代码如下: /***************************************************************************************************** Name 购物车 Version 1.1 Author Vanni(凡林) url:www.27sea.com QQ:303590170 CreateDate 2005-05-31 Description 此类是基于JavaScript和客户端Cookie,请保证客户端开

  • js+cookies实现悬浮购物车的方法

    本文实例讲述了js+cookies实现悬浮购物车的方法.分享给大家供大家参考.具体分析如下: 在 "商品列表展示页"做上 "悬浮的"与"DataList"结合的 "无刷新购物车",只需计算出总价,不必去单独页面结算.找了些资料修改了一下,整理示例如下: gwc.js文件如下: // JavaScript Document //计算单个小计 function EveryCount() { var index=window.eve

  • js简易版购物车功能

    本文实例为大家分享了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; bord

  • js 简易版滚动条实例(适用于移动端H5开发)

    废话不多说,直接上代码 <!DOCTYPE html> <html> <head> <title>滑动条</title> <meta charset="utf-8"> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="viewport" conte

  • 原生js+cookie实现购物车功能的方法分析

    本文实例讲述了原生js+cookie实现购物车功能的方法.分享给大家供大家参考,具体如下: 这里使用js+cookie实现简单的购物车功能. 首先是简单的HTML结构,只是为了演示下功能. <ul> <li><span>a0001</span><span>shdfi</span><span>¥98.00</span> <input type="button" value="加

  • Vue.js实现开发购物车功能的方法详解

    本文实例讲述了Vue.js实现开发购物车功能的方法.分享给大家供大家参考,具体如下: 购物车一般包含商品名称.单价.数量等信息,数量可以任意新增或减少,商品项也可删除,还可以支持全选或多选: 我们把这个小项目分为三个文件: index.html (页面) index.js (Vue 脚本) style.css (样式) 1 index.js 首先在 js 中初始化 Vue 实例,整体模板如下: var app = new Vue({ el: '#app', data: { ... }, moun

  • Vue.js实现的购物车功能详解

    本文实例讲述了Vue.js实现的购物车功能.分享给大家供大家参考,具体如下: 使用计算属性,内置指令,方法等基础知识开发购物车. 需求分析:展示一个已经加入购物车的商品列表,包含商品名称.商品单价.购买数量和操作,以及最后确定是否选中商品的功能,总价格为选中商品的价格,够买数量可以增加减少,商品可以从购物车中移除.效果如图所示: --实例来自<Vue.js实战>第五章 逻辑整理:vue实例定义一个数组list存放商品信息,定义方法与减少按钮,增加按钮等联系,动态改变商品数量,通过handleR

  • vue.js实现简单购物车功能

    本文实例为大家分享了vue.js实现简单购物车的具体代码,供大家参考,具体内容如下 这次我将给大家带来一个vue.js实现购物车的小项目,如有不足请严厉指出. 购物车功能有:全选和选择部分商品,选中商品总价计算,商品移除,以及调整购买数量等功能. js主要有以下方法 加函数,减函数,手动修改数量判断库存函数,总价格计算函数,单选事件,全选事件,一共分为6个事件 具体效果如下图 代码在这里 main.js 'use strict' var app = new Vue({ el: '#app', d

  • Vue.js框架实现购物车功能

    本文实例为大家分享了Vue.js框架实现购物车的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="

  • js实现简易购物车功能

    本文实例为大家分享了js实现简易购物车功能的具体代码,供大家参考,具体内容如下 一.整体效果图 (关灯下) (开灯下) 二.HTML代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>购物车</title> <link type="text/css" rel="sty

  • JS+HTML5实现的前端购物车功能插件实例【附demo源码下载】

    本文实例讲述了JS+HTML5实现的前端购物车功能插件.分享给大家供大家参考,具体如下: 最近做一个商城,需要用到一个简答的购物车功能,当然,后端实现比较容易,,这里重点还是讲一下前端的JS插件. 从源代码里面没看出来,它叫啥,好像叫:ctshop .js,不管啦,反正我提供下载就好,我做了一些简单的修复,支持了中文 这个插件使用了HTML5的新特效:storage ,就是游览器数据库的功能,这跟之前把数据存在cookies里面原理是相识的,这样的好处在于用户刷新页面,数据还在,,又不需要跟后端

  • angular.js实现购物车功能

    本文实例为大家分享了angular.js购物车功能的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>购物车</title> <script src="angularjs/angular.js"></script> <st

随机推荐