当前位置: 首页 > 编程笔记 >

jQuery实现购物车多物品数量的加减+总价计算

齐航
2023-03-14
本文向大家介绍jQuery实现购物车多物品数量的加减+总价计算,包括了jQuery实现购物车多物品数量的加减+总价计算的使用技巧和注意事项,需要的朋友参考一下
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>jQuery实现购物车多物品数量的加减+总价计算</title> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script> 
<script> 
$(function(){ 
$(".add").click(function(){ 
var t=$(this).parent().find('input[class*=text_box]'); 
t.val(parseInt(t.val())+1) 
setTotal(); 
}) 
$(".min").click(function(){ 
var t=$(this).parent().find('input[class*=text_box]'); 
t.val(parseInt(t.val())-1) 
if(parseInt(t.val())<0){ 
t.val(0); 
} 
setTotal(); 
}) 
function setTotal(){ 
var s=0; 
$("#tab td").each(function(){ 
s+=parseInt($(this).find('input[class*=text_box]').val())*parseFloat($(this).find('span[class*=price]').text()); 
}); 
$("#total").html(s.toFixed(2)); 
} 
setTotal(); 

}) 
</script> 
</head> 
<body> 
<table id="tab"> 
<tr> 
<td> 
<span>单价:</span><span>1.50</span> 
<input name="" type="button" value="-" /> 
<input name="" type="text" value="1" /> 
<input name="" type="button" value="+" /> 
</td> 
</tr> 
<tr> 
<td> 
<span>单价:</span><span>3.95</span> 
<input name="" type="button" value="-" /> 
<input name="" type="text" value="1" /> 
<input name="" type="button" value="+" /> 
</td> 
</tr> 
</table> 

<p>总价:<label id="total"></label></p> 
</body> 
</html> 
 类似资料:
  • 我对Java的概念很陌生。我使用核心java设计了一个购物车应用程序。但我无法获得所需的输出。这是我的pojo课程项目。Java语言 主要课程是ShopCartTest。Java语言 有4个pojo的购物车,库存,项目,用户。用户必须能够选择多个数量的多个项目。(对于项目,将创建一个列表,对于数量:映射。其中项目对象是键,数量是值)。用户选择类别、项目,然后选择数量。然后他可以继续结帐。所以当他决

  • 本文向大家介绍jQuery实现购物车计算价格功能的方法,包括了jQuery实现购物车计算价格功能的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了jQuery实现购物车计算价格功能的方法。分享给大家供大家参考。具体如下: 目的 实现在html界面修改购物车的件数,购物车商品价格的小计和总计要修改。 实现思路 1.当点击进入界面,刷新的时候触发body内的onload=""方法,跳转到J

  • 本文向大家介绍Android 购物车加减功能的实现代码,包括了Android 购物车加减功能的实现代码的使用技巧和注意事项,需要的朋友参考一下 Android 实现购物车加减功能,效果图如下所示: 到此这篇关于Android 购物车加减功能的实现代码的文章就介绍到这了,更多相关android 购物车加减内容请搜索呐喊教程以前的文章或继续浏览下面的相关文章希望大家以后多多支持呐喊教程!

  • 本文向大家介绍js实现商品抛物线加入购物车特效,包括了js实现商品抛物线加入购物车特效的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了js实现商品抛物线加入购物车动画代码,供大家参考,具体内容如下   parapola.js 使用: 加入购物车实战: 以上就是本文的全部内容,希望对大家的学习有所帮助。

  • 本文向大家介绍Android实现购物车添加商品特效,包括了Android实现购物车添加商品特效的使用技巧和注意事项,需要的朋友参考一下 一、引言 以前在饿了么上面订餐的时候,曾经看到过这么一个特效,就是将商品加入订单时,会有一个小球呈抛物线状落入购物车中,然后购物车中的数量会改变。具体的效果如下图。 效果很简单,就是一个抛物线的动画,那么我们应该用什么技术来实现呢?想了想,动画层是不个错的选择!下

  • 本文向大家介绍Android实现购物车添加商品动画,包括了Android实现购物车添加商品动画的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了Android实现购物车添加商品动画的具体代码,供大家参考,具体内容如下 实现需求: 在商品列表页面,从列表Item 添加商品的时候,需要一个动画,仿佛是是往购物车里添加商品。 实现思路: 获取起始点与终点的坐标,利用PathMeasure 绘