jQuery实现动态购物车效果

最新推荐文章于 2024-01-07 08:06:53 发布
最新推荐文章于 2024-01-07 08:06:53 发布
阅读量2k 收藏 1
点赞数
分类专栏： 前端 js jQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaojing5576/article/details/53160289
版权 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/test7.css" />
		<script src="js/jquery-1.6.2.js"></script>
		<script>
			function getdelete(obj){
				var trNo = $(obj).parent("td").parent("tr").prevAll().length; 
				$("#display tr").eq(trNo).remove();
				prices.splice(trNo-1,1);
				ddprices.splice(trNo-1,1);
				scores.splice(trNo-1,1);
				sumChange($(obj));
			}
		</script>
		<script>
			var prices = new Array(41,42,43,44,45);
			var ddprices = new Array(31,32,33,34,35);
			var scores = new Array(11,12,13,14,15);
			function sumChange (obj,value){
				//获得所在行号
				if($(obj).val() == ""||$(obj).val == null){
					$(obj).val(0);
				}
				var trNo = $(obj).parent("td").parent("tr").prevAll().length;
				var numbers = new Array();
				$("input[type='text']").each(function(index){
					numbers[index] = parseInt($(this).val());
				});
				var values = new Array();
				var ddValues = new Array();
				var getScores = new Array();
				var sumPrices =0;
				var ddSumPrices =0;
				var sumScores =0;
				$(numbers).each(function(index){
					values[index] = prices[index]*numbers[index];
					ddValues[index] = ddprices[index]*numbers[index];
					getScores[index] = scores[index]*numbers[index];
					sumPrices = sumPrices + values[index];
					ddSumPrices =ddSumPrices+ ddValues[index];
					sumScores = sumScores+ getScores[index];
				});
				
				//获得本次改变的数值
				var saveMoney = sumPrices - ddSumPrices;
				$("#saveMoney").html(saveMoney);
				$("#getScore").html(sumScores);
				$("#sumMoney").html(sumPrices);
				
			}
		</script>
	</head>
	<body>
		<div>您已经选购的商品<br /></div>
		
		<table cellspacing="0px" id="display">
			<tr id="title">
				<td class="name">商品名称</td>
				<td class="score">单品积分</td>
				<td class="price">市场价</td>
				<td class="ddprice">当当价</td>
				<td class="sum">数量</td>
				<td class="delete">删除</td>
			</tr>
			<tr class="content">
				<td class="name">书本1</td>
				<td class="score">11</td>
				<td class="price">￥41</td>
				<td class="ddprice">￥31</td>
				<td class="sum"><input type="text" class="numbers" value='0' οnfοcus="if (value=='0'){value ='0'}"
			οnblur="if (value==''){value='0'}" οnchange="sumChange(this,this.valueAsNumber)"></td>
				<td class="delete"><a href="#" οnclick="getdelete(this);return false">删除</a></td>
			</tr>
			<tr class="content">
				<td class="name">书本2</td>
				<td class="score">12</td>
				<td class="price">￥42</td>
				<td class="ddprice">￥32</td>
				<td class="sum"><input type="text" class="numbers" value='0' οnfοcus="if (value=='0'){value ='0'}"
			οnblur="if (value==''){value='0'}" οnchange="sumChange(this,this.valueAsNumber)"></td>
				<td class="delete"><a href="#" οnclick="getdelete(this);return false">删除</a></td>
			</tr>
			<tr class="content">
				<td class="name">书本3</td>
				<td class="score">13</td>
				<td class="price">￥43</td>
				<td class="ddprice">￥33</td>
				<td class="sum"><input type="text" class="numbers" value='0' οnfοcus="if (value=='0'){value ='0'}"
			οnblur="if (value==''){value='0'}" οnchange="sumChange(this,this.valueAsNumber)"></td>
				<td class="delete"><a href="#" οnclick="getdelete(this);return false">删除</a></td>
			</tr>
			<tr class="content">
				<td class="name">书本4</td>
				<td class="score">14</td>
				<td class="price">￥44</td>
				<td class="ddprice">￥34</td>
				<td class="sum"><input type="text" class="numbers" value='0' οnfοcus="if (value=='0'){value ='0'}"
			οnblur="if (value==''){value='0'}" οnchange="sumChange(this,this.valueAsNumber)"></td>
				<td class="delete"><a href="#" οnclick="getdelete(this);return false">删除</a></td>
			</tr>
			<tr class="content">
				<td class="name">书本5</td>
				<td class="score">15</td>
				<td class="price">￥45</td>
				<td class="ddprice">￥35</td>
				<td class="sum"><input type="text" class="numbers" value='0' οnfοcus="if (value=='0'){value ='0'}"
			οnblur="if (value==''){value='0'}" οnchange="sumChange(this,this.valueAsNumber)"></td>
				<td class="delete"><a href="#" οnclick="getdelete(this);return false">删除</a></td>
			</tr>
			
		</table>
		您共节省：<span id="saveMoney"></span>
		可获商品积分：<span id="getScore"></span>
		商品金额总计：<span id="sumMoney"></span>
		<button id="submit">结算</button>
		
	</body>
</html>

xiaojing5576
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
利用jQuery实现购物车功能
荒的博客
04-27 2万+
购物车----jQuery h1 { text-align:center; } table { margin:0 auto; width:60%; border:2px solid #aaa; border-collapse:collapse; }
Jquery实现加入购物车动画效果
qq_38406852的博客
03-20 1346
点击加入购物车 该图片飞出购物车处并且数量显示加1 HTML+css： html <div class="img-box"> <ul> <li> <img src="../img/f1.jpg" alt=""> <button class="btn1">加入购物车&lt...
jQuery购物车完整功能实现，全代码详解（有动态效果图）
周百万的博客
07-25 8608
jQuery购物车 实现购物车完整功能全代码详解（有gif动态效果图）
纯JS实现购物车&jQuery实现购物车
m0_74315688的博客
03-29 2234
JavaScript购物车。
使用JavaScript实现动态生成并管理购物车的深入解析
最新发布
geng1025的博客
01-07 1059
同时，我们还需要进行充分的测试和优化，以确保功能的稳定性和良好的用户体验。通过这样的实现过程，我们可以为用户提供一个方便、快捷的购物车功能，提升电子商务网站的用户满意度和转化率。购物车的重要性不言而喻，它是连接用户与商品的关键环节，直接影响到用户的购买决策和购物体验。为了有效地管理购物车中的商品，我们需要设计一个合适的数据结构来存储商品信息。为了实时更新购物车的状态并呈现给用户，我们需要创建一个函数来渲染购物车的内容。完成页面实现后，我们需要进行测试和优化，以确保购物车功能正常工作并具备良好的用户体验。
jquery技巧
julius198866的专栏
03-05 252
原文作者：Viral Patel 翻译：http://blog.okbase.net/jquery2000 下面是非常有用的 原文作者：Viral Patel 翻译：http://blog.okbase.net/jquery2000 下面是非常有用的jQuery的技巧提示，我觉得对你可能非常有用，就共享出来。 免责声明：以下例子代码从网上收集，并未仔细测试。 1. 优化复
jQuery 滑动效果的实现
weixin_45846303的博客
05-29 374
jQuery的一个全屏jQuery全屏滚动插件fullPage.js。我们经常见到一些全屏的特绚丽页面，手指或者鼠标滑动一下就是一整屏切换，而且还有各种效果。 下面我们就介绍一下jQuery的fullPage.js的如何使用及常用的配置。 fullpage.js的主要功能 fullPage.js是一个基于jquery的插件，它能很方便的制作出全屏网站，github地址。 主要功能有： 支持鼠标滚动。 支持前后退和键盘控制。 多个回调函数。 支持手机，平板触摸事件。 支持css3动画。 支持窗口缩放。 窗
jQuery模拟实现天猫购物车动画效果实例代码
10-19
最近在项目开发中遇到这样的需求，点击购买按钮，模拟抛物线将物品弹到购物车里，购物车添加物品后，显示+1动画。效果非常棒，接下来小编把实例代码分享到脚本之家平台，需要的的朋友参考下吧
jQuery实现购物车数字加减效果
11-12
本篇文章将详细讲解如何使用jQuery库来实现购物车中的数字加减效果，以提供用户友好的界面交互。 首先，jQuery是一个高效、简洁且功能丰富的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务...
jQuery实现加入购物车飞入动画效果
10-24
当您在电商购物网站浏览中意的商品时，您可以点击页面中的“加入购物车”按钮即可将商品加入的购物车中。本文介绍借助一款基于jQuery的动画插件，点击加入购物车按钮时，实现商品将飞入到右侧的购物车中的效果。
jQuery点击添加到购物车
03-06
jQuery点击添加到购物车 适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.
实现动态无刷新添加购物车
10-18
“实现动态无刷新添加购物车”可以直接套用！
jquery实现购物车无刷新操作
10-09
jquery实现购物车无刷新操作
jquery做的购物车(效果非常好)
10-26
jquery做的购物车，效果不错，分享一下，希望对各位有用
jquery实现购物车购物车全选和增加删除商品.zip
10-14
以上就是使用jQuery实现购物车全选、商品增删功能的主要步骤和知识点。通过理解并实践这些内容，开发者可以构建一个功能完善的前端购物车系统。记得在实际开发中考虑用户体验、错误处理和性能优化等方面，以提供更高...
js动态添加实现简单的部分购物车功能 demo
weixin_45846263的博客
01-04 1252
js动态添加实现简单的部分购物车功能 首先了解添加删除元素： 创建新的 HTML 元素 - appendChild() 如需向 HTML DOM 添加新元素，首先必须创建该元素，然后把它追加到已有的元素上。 例： <div id="d1"> <p id="p1">This is a paragraph.</p> <p id="p2">This is ...
通过JQuery实现购物车的效果
weixin_44610025的博客
02-14 1553
今天，主要来说一下如何通过JQuery来实现一个简易版的购物车效果。 首先，通过ajax来进行请求。 // 1、通过ajax来进行请求 $.ajax({ url: "data.json", success: function(arr){ // JQuery在下载数据的时候，根据下载的数据，自动进行数据类型转换 // 加入购物车设置id，id和当前按钮所在的【商品的id】相同。 ...
jquery来实现的添加商品和减少商品数量,用于购物车等实时改变价格
freejs
10-25 1859
jquery来实现的添加商品和减少商品数量,用于购物车等实时改变价格  代码没有操作数据库的部分，也没有发送和接收数据的部分 演示     XML/HTML Code &lt;p class="num_box"&gt;&lt;a class="J_jia"&gt;+&lt;/a&gt;&lt;label&gt;&lt;input type="text&qu
js添加到购物车动画效果实现
ITzhongzi的博客
12-31 7599
方法一： 用js控制购车的的位置实现 原理解析： 通过js动态生成一个过度元素（就是一个可以移动的小球），并控制该元素的位置移动，从点击按钮dom元素移动大购物车的dom元素，实现添加到购物车的动态效果。 核心js代码 github代码地址 /* * 添加到购物车动画 脚本 * */ /*** * 动画轨迹控制 * @param addBtnDom 增加按钮的dom元素或者选择器...
jquery仿制京东商城购物车前端局部更新效果
03-25
A：实现jquery仿制京东商城购物车前端局部更新效果的步骤如下： 1. 在HTML页面中创建一个购物车列表，用于展示已经添加到购物车中的商品信息，包括商品图片、名称、价格、数量等。 2. 在每个商品信息后面添加一个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值