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 ...
随机推荐
- war包中少了class文件
用eclipse的maven工具打包(执行mvn clean install 和 mvn package)后,再启动wildfly, war包应该会自动复制到wildfly的deployment ...
- angularJS directive详解（自定义指令）
Angularjs指令定义的API AngularJs的指令定义大致如下 其中return返回的对象包含很多参数,下面一一说明 1.restrict (字符串)可选参数,指明指令在DOM里面以什么形式 ...
- 用window的onload事件，窗体加载完毕的时候
<script type="text/javascript"> //用window的onload事件,窗体加载完毕的时候 window.onload=function( ...
- jquery判断对象是否显示或隐藏
if($('a.specail2').is(":visible")){ /**jquery判断对象是否显示或隐藏**/ $('a.one').hide(); $('a.specai ...
- pdf.js在国际化的时候，显示不了中文的解决办法
在项目中使用了pdf实现在线预览功能,开始工具栏中一直都是英文的,在view.js中设置了也不起作用,偶然发现了问题所在 当我把网站发布到iis上的时候,用google浏览器的审查元素功能的审核发现j ...
- web前段学习2016.6.6
目前上网的方式:手机平板电脑移动端:智能手机.平板PC:电脑.笔记本运行在移动端的东西:APPios:object-candroid:javapc端的东西:桌面应用程序 c++ 我们上网的方式都是通过 ...
- mybatis学习笔记（五） -- maven+spring+mybatis从零开始搭建整合详细过程（附demo和搭建过程遇到的问题解决方法）
文章介绍结构一览 一.使用maven创建web项目 1.新建maven项目 2.修改jre版本 3.修改Project Facts,生成WebContent文件夾 4.将WebContent下的两个文 ...
- [Splay伸展树]splay树入门级教程
首先声明,本教程的对象是完全没有接触过splay的OIer,大牛请右上角.. 首先引入一下splay的概念,他的中文名是伸展树,意思差不多就是可以随意翻转的二叉树 PS:百度百科中伸展树读作:BoGa ...
- Mycat在MySQL主从模式（1主1从）下读写分离和及自动切换模式的验证
实验环境 两台Centos7 MySQL5.7.12 IP地址为:192.168.10.36 192.168.10.37 一台Centos7 Mycat IP地址为:192.168.10.31 一 ...
- Android源码博文集锦2
Android精选源码 android简单易用的Gallery android漂亮的加载效果 这可能是RxJava 2.x 最好的入门教程示例代码 android图片可拖拽排序 android用几行代 ...