JS实现添加至购物车功能
效果图展示：
当将书拖拽至购物车一览时：
首先将页面的基本结构写出来：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>加入购物车功能</title> </head>
<body>
<ul>
<li draggable="true">
<img src="data:images/img1.jpg"/>
<p>JavaScript语言精粹</p>
<p>40元</p>
</li>
<li draggable="true">
<img src="data:images/img2.jpg"/>
<p>JavaScript权威指南</p>
<p>80元</p>
</li>
<li draggable="true">
<img src="data:images/img3.jpg"/>
<p>精通JavaScript</p>
<p>50元</p>
</li>
<li draggable="true">
<img src="data:images/img4.jpg"/>
<p>JavaScript DoM 编程艺术</p>
<p>40元</p>
</li>
</ul>
<div id="div1"> <p>
<span class="box1">数量</span>
<span class="box2">书名</span>
<span class="box3">单价</span>
</p>
<!-- <p>
<span class="box1">1</span>
<span class="box2">JavaScript DoM 编程艺术</span>
<span class="box3">40元</span>
</p>-->
</div>
<input id="input1" value="付款" type="submit"/>
</body>
</html>
此时需要注意因为li是可以拖拽的，需要给每个li添加draggable = "true"
再稍微添加样式，因为主要为了实现功能，样式就粗略一些：
<style>
*{
margin:0px;
padding:0px;
}
li{
list-style: none;
width:200px;
border: 1px solid #000;
float: left;
}
img{
width:200px;
}
#div1{
width:400px;
height:200px;
border: 1px solid #000;
margin:10px;
float: left;
clear: both;
}
p{
width:100%;
border:1px dashed #000;
clear:both;
}
.box1{
float:left;
margin-right:20px ;
}
.box2{
float: left;
margin-right:20px ;
}
.box3{
float:left;
margin-right:20px ;
}
.allMoney{
float:right;
clear: both;
}
#input1{
width:80px;
margin-left:10px;
clear: both;
float: left;
}
</style>
此时的效果图：
但是此时是没有功能的，最后开始写最主要的功能JS模块：
window.onload = function (){
var aLi = document.getElementsByTagName("li");
var oDiv = document.getElementById("div1");
var oInput = document.getElementById("input1");
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("money",aP[1].innerHTML);
}
oDiv.ondragover = function(ev){
var ev = ev||window.event;
ev.preventDefault();
}
}
oDiv.ondrop = function (ev){
var ev = ev||window.event;
ev.preventDefault();
var sTitle = ev.dataTransfer.getData("title");
var sMoney = ev.dataTransfer.getData("money");
var cP = document.createElement("p");
this.appendChild(cP);
var span1 = document.createElement("span");
span1.className = "box1";
span1.innerHTML = "1";
cP.appendChild(span1);
var span2 = document.createElement("span");
span2.className = "box2";
span2.innerHTML = sTitle;
cP.appendChild(span2);
var span3 = document.createElement("span");
span3.className = "box3";
span3.innerHTML = sMoney;
cP.appendChild(span3);
json[sTitle]=1;
}
}
</script>
需要注意的说里面的方法：
ondragstart 是当被拖拽元素开始拖动时发生的事件。
ondragover 是被拖拽元素拖动到目标元素身上时发生连续触发的事件，是应该添加到目标元素身上的事件。它是有默认事件的，只有将它的默认事件阻止了，才能实现ondrog事件。
ondrog 是被拖拽元素拖到目标元素身上，然后松开鼠标时的事件。这个事件的实现必须阻止ondragover的默认事件，通过ev.preventDefault();因为图片拖动的时候浏览器默认是打开图片的，所以在这个事件里面，我们也需要阻止它的默认事件。ev.preventDefault()。
ev.dataTransfer.setData( ， ) 是添加了一个有索引的值。第一个输入的参数就是它的索引，第二个就是它的值。
对立的就是ev.dataTransfer.getData( )，不过它只有一个参数，就是需要得到的值的索引。
在ondrog事件里面动态的添加购物车里面的数据。通过appendChild加入购物车这个div里面去。
但是此时能发现一个问题，此时当添加重复的书进去的时候，它是另外添加了一个子元素，我们需要的是应该在原来有的子元素上的数量进行累加才对。
所以对ondrog事件里面的内容进行改进：
首先增加了几个全局变量：
var oInput = document.getElementById("input1");
var json = {};
var allMoney = null;
然后使用在ondrog事件里面：
if(!json[sTitle]){
var cP = document.createElement("p");
this.appendChild(cP);
var span1 = document.createElement("span");
span1.className = "box1";
span1.innerHTML = "1";
cP.appendChild(span1);
var span2 = document.createElement("span");
span2.className = "box2";
span2.innerHTML = sTitle;
cP.appendChild(span2);
var span3 = document.createElement("span");
span3.className = "box3";
span3.innerHTML = sMoney;
cP.appendChild(span3);
json[sTitle]=1;
}
else{
var oBox1 = document.getElementsByClassName("box1");
var oBox2 = document.getElementsByClassName("box2");
var oBox3 = document.getElementsByClassName("box3");
for (var i=0;i<oBox2.length;i++){
if(oBox2[i].innerHTML == sTitle){
oBox1[i].innerHTML = parseInt(oBox1[i].innerHTML)+1;
oBox3[i].innerHTML = parseInt(oBox3[i].innerHTML)+parseInt(sMoney)+"元";
}
}
}
if(!allMoney){
allMoney = document.createElement("div");
allMoney.className = "allMoney";
}
var oBox3 = document.getElementsByClassName("box3");
var tempMoney = 0;
for(var i =1;i<oBox3.length;i++){
tempMoney+=parseInt(oBox3[i].innerHTML);
}
allMoney.innerHTML = "总价："+tempMoney+"元";
oDiv.appendChild(allMoney);
}
oInput.onclick = function () {
alert("你需要购买商品的总价为"+allMoney.innerHTML);
}
在这里通过一个Json[sTitle]来判断购物车里面是否已经有了这本书，，如果没有就进行动态的添加，有的话就通过类名，找到所有已经存在购物车里面的书的数量，名字和价格，用
一个for循环和书的名字来找到那本书的已有数量和价格，进行累加。
最后再添加了总价格的显示和提交按钮的一个效果。
JS实现添加至购物车功能的更多相关文章
- jQuery 复制节点的元素实现添加到购物车功能
描述: 用户点击左边div中的商品,对应商品会自动添加到右面的div中,类似电子商城中的添加到购物车功能. 主要用到了jquery中的复制节点功能,基本原理是首先获取点击的元素,然后将相应信息进行克隆 ...
- DJANGO-天天生鲜项目从0到1-009-购物车-Ajax实现添加至购物车功能
本项目基于B站UP主‘神奇的老黄’的教学视频‘天天生鲜Django项目’,视频讲的非常好,推荐新手观看学习 https://www.bilibili.com/video/BV1vt41147K8?p= ...
- 模仿bootstrap做的 js tooltip (添加鼠标跟随功能)
主要思路: 使用jquery hover方法,当进入时显示tooltip,移出时隐藏tooltip当设定为鼠标跟随时,使用mousemove事件显示tooltip根据tooltip显示位置设置,计算t ...
- 给destoon商城的列表中和首页添加购物车功能
如何给destoon商城的列表中和首页添加购物车功能? 目前加入购物车的功能只存在商城的详细页面里,有时候我们需要批量购买的时候,希望在列表页就能够使用这个加入购物车的功能. 修改步骤见下: 例如在商 ...
- react.js 之 批量添加与删除功能
最近做的CMS需要用到批量添加图片的功能:在添加文件的容器盒子内,有两个内容,分别是:添加按钮与被添加的选择文件组件. 结构分析: 被添加的组件,我们称为:UploadQiNiuFiles(七牛文件上 ...
- vue登录功能和将商品添加至购物车实现
2.1: 学子商城--用户登录 用户登录商城用户操作行为,操作用户输入用户名和密码 点击登录按钮,一种情况登录成功 一种情况登录失败 "用户名或密码有误请检查" 2.2:如何实现 ...
- ASP.NET之电子商务系统开发-2(购物车功能)
一.前言 继上次的首页数据列表后,这是第二篇.记录一下购物车这个比较庞大的功能,可能实现的方法跟其他人有点不一样,不过原理都差不多,是将cookie存数据库里面的. 二.开始 首先看一下购物车流程及对 ...
- vue实战记录（五）- vue实现购物车功能之商品总金额计算和单选全选删除功能
vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(五) GitHub:sue ...
- vue实战记录（四）- vue实现购物车功能之过滤器的使用
vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(四) GitHub:sue ...
随机推荐
- 把angular项目整合到.net mvc中
之前的开发选择的是完全舍弃服务端,仅保留最简单web服务器提供angular经打包的静态资源,此外所有的业务与数据请求都访问一个分离的WebApi来实现.不过最近碰到一个需求,有必要使用多个客户端,而 ...
- 【Android Developers Training】 15. 启动一个Activity
注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...
- laravel怎么创建一个简单的blog
主要功能实现:点击标题跳转 第一步:创建路由: Route::get('/articles','ArticlesController@index'); Route::get('/articles/{i ...
- Gradle学习笔记之Groovy
[TOC] Gradle 的核心功能是由Java实现. 在这些功能之上, 有一个使用动态编程语言Groovy编写的领域特定语言(DSL). Gradle的构建脚本build.gradle和settin ...
- js把时间戳转换为普通日期格式
第一种 function getLocalTime(nS) { return new Date(parseInt(nS) * 1000).toLocaleString().replace(/:\d{1 ...
- django-将数据库数据转换成JSON格式（ORM和SQL两种情况）
最近打算搞一个自动化运维平台,所以在看Django的知识. 在实际项目开发中,遇到一个小问题:前后端发生数据交互主流采用的是JSON.前端传数据到服务器端比较简单,稍微麻烦的是服务器端传JSON到前端 ...
- 使用jQuery操作 DOM
DOM操作分为三类: 1.DOM Core:任何一种支持DOM的编程语言都可以使用它,如getElementById() 2.HTML-DOM:用于处理HTML文档,如document.forms 3 ...
- server
- python学习笔记——列表操作
python列表操作——增 append:追加一条数据到列表的最后 name = ["Zhangsan","XiongDa","Lisi"] ...
- java获取mp3的时长和播放mp3文件
所需包为jaudiotagger-2.2.6-SNAPSHOT.jar和jl1.0.1.jar. import java.io.BufferedInputStream; import java.io. ...