Jquery实现购物车物品数量的加减特效
今天网友翠儿在用Jquery实现购物车物品数量的加减特效的时候遇到问题来问我,我后来帮她解决了这个Jquery特效,现在把它整理出来分享给大家用,虽然功能比较简单,但是很实用。
主要包括了以下功能:
1、数量增加操作功能
2、数量减少操作功能
3、总价计算功能
4、自动判断数量到1的时候,减少操作按钮禁止点击,数量增加时自动恢复
5、保留小数点位数toFixed()函数非常实用
功能代码如下:
$(function(){
//获得文本框对象
var t = $("#text_box");
//数量增加操作
$("#add").click(function(){
t.val(parseInt(t.val())+1)
if (parseInt(t.val())!=1){
$('#min').attr('disabled',false);
}
setTotal();
})
//数量减少操作
$("#min").click(function(){
t.val(parseInt(t.val())-1);
if (parseInt(t.val())==1){
$('#min').attr('disabled',true);
}
setTotal();
})
//计算操作
function setTotal(){
$("#total").html((parseInt(t.val())*3.95).toFixed(2));//toFixed()是保留小数点的函数很实用哦
}
//初始化
setTotal();
})
效果如下:

Jquery实现购物车物品数量的加减特效的更多相关文章
- jQuery实现购物车物品数量的加减
基于jquery的一款代码,实现购物车数据的加减,在淘宝网.京东商城购物时时经常见到的一个功能,点击文本框两侧的“+”与“-”,就可以增加或减少文本框内的数字值,每次步长为1,当然这个是可以自己设置的 ...
- jQuery实现购物车多物品数量的加减+总价计算
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. ...
- jQuery实现购物车多物品数量的加减+总价+删除计算
<?php session_start(); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E ...
- JQuery购物车多物品数量的加减+总价计算
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JQuery浮动层Loading页面加载特效
之前做项目,经常需要一些浮动层加载Loading. 现在好多前端框架都能实现了,最常用的就是 artDialog 下面记录下当时的代码. <!DOCTYPE html PUBLIC " ...
- Jquery实现表单动态加减、ajax表单提交
一直在搞Java后台开发,记得刚工作那一两年时间搞过前后端交互开发,用的东西也是五花八门,当时觉得做页面展示给别人看,是很有成就的事情,不过现在感觉自己跟纯前端开发比起来弱爆了,不过如果你的目标是作为 ...
- js 购物车的数量加减,对应的总价也随机变化
html相关的源码: <div class="goods_num clearfix"> <div class="num_name fl"> ...
- 自己动手丰衣足食之 jQuery 数量加减插件
引言 做一个手机端的订单相关项目中,其中下订单时需要用到数量加减的控件,可以设置默认值,也可以设置最大值和最小值.使用jQuery这么长时间了,平时很少去编写属于自己的插件,现在编写的时候对立面的一些 ...
- jQuery数字加减插件
jQuery数字加减插件 我们在网上购物提交订单时,在网页上一般会有一个选择数量的控件,要求买家选择购买商品的件数,开发者会把该控件做成可以通过点击实现加减等微调操作,当然也可以直接输入数字件数.本文 ...
随机推荐
- ui-bootstrap-tpls-0.11.0.min.js
- 解决织梦标签artlist不能调用副栏目的问题?
本文转自:http://www.xinshou5.com/a/127.html 织梦列表页中不支持artlist这个标签,这样怎么调用副栏目? 想要在列表页调用副栏目,但是列表页不支持artlist这 ...
- Spring mvc源码url路由-我们到底能走多远系列(38)
我们到底能走多远系列38 扯淡: 马航的事,挺震惊的.还是多多珍惜身边的人吧. 主题: Spring mvc 作为表现层的框架,整个流程是比较好理解的,毕竟我们做web开发的,最早也经常接触的就是一个 ...
- Python天天美味(13) - struct.unpack
转载自:http://www.cnblogs.com/coderzh/archive/2008/05/04/1181462.html Python中按一定的格式取出某字符串中的子字符串,使用struc ...
- css 属性积累
1. letter-spacing:6px; //属性增加或减少字符间的空白(字符间距) 2. cursor // 鼠标移上去的鼠标状态 属性值有: ...
- MVC&WebForm对照学习:文件上传(以图片为例)
原文 http://www.tuicool.com/articles/myM7fe 主题 HTMLMVC模式Asp.net 博客园::首页:: :: :: ::管理 5 Posts :: 0 ...
- Codeforces Round #303 (Div. 2) B 水 贪心
B. Equidistant String time limit per test 1 second memory limit per test 256 megabytes input standar ...
- dll清理
結束了閉關,又得與人類交流了,只好裝QQ 印象中企鵝手腳一向是BAT中最乾淨的-結果還是裝了不少樂色,一併挖出來除之 C:\program files\common files\tencent\q ...
- ZOJ 1110 Dick and Jane
原题链接 题目大意:Dick和Jane的年龄之和等于他们宠物的年龄,宠物之间的年龄关系XXX. 解法:小学奥数题目,枚举法. 参考代码: #include<iostream> #inclu ...
- Javascript模块化编程(二):AMD规范【转】
作者: 阮一峰 日期: 2012年10月30日 这个系列的第一部分介绍了Javascript模块的基本写法,今天介绍如何规范地使用模块. (接上文) 七.模块的规范 先想一想,为什么模块很重要? 因为 ...