今天网友翠儿在用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实现购物车物品数量的加减特效的更多相关文章

  1. jQuery实现购物车物品数量的加减

    基于jquery的一款代码,实现购物车数据的加减,在淘宝网.京东商城购物时时经常见到的一个功能,点击文本框两侧的“+”与“-”,就可以增加或减少文本框内的数字值,每次步长为1,当然这个是可以自己设置的 ...

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

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. ...

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

    <?php session_start(); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E ...

  4. JQuery购物车多物品数量的加减+总价计算

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. JQuery浮动层Loading页面加载特效

    之前做项目,经常需要一些浮动层加载Loading. 现在好多前端框架都能实现了,最常用的就是 artDialog 下面记录下当时的代码. <!DOCTYPE html PUBLIC " ...

  6. Jquery实现表单动态加减、ajax表单提交

    一直在搞Java后台开发,记得刚工作那一两年时间搞过前后端交互开发,用的东西也是五花八门,当时觉得做页面展示给别人看,是很有成就的事情,不过现在感觉自己跟纯前端开发比起来弱爆了,不过如果你的目标是作为 ...

  7. js 购物车的数量加减,对应的总价也随机变化

    html相关的源码: <div class="goods_num clearfix"> <div class="num_name fl"> ...

  8. 自己动手丰衣足食之 jQuery 数量加减插件

    引言 做一个手机端的订单相关项目中,其中下订单时需要用到数量加减的控件,可以设置默认值,也可以设置最大值和最小值.使用jQuery这么长时间了,平时很少去编写属于自己的插件,现在编写的时候对立面的一些 ...

  9. jQuery数字加减插件

    jQuery数字加减插件 我们在网上购物提交订单时,在网页上一般会有一个选择数量的控件,要求买家选择购买商品的件数,开发者会把该控件做成可以通过点击实现加减等微调操作,当然也可以直接输入数字件数.本文 ...

随机推荐

  1. angularjs 不同的controller之间值的传递

    Sharing data between controllers in AngularJS I wrote this article to show how it can possible to pa ...

  2. Codeforces 106 C 多重背包

    题目链接:http://codeforces.com/problemset/problem/106/C 根据题意列出式子,设每种蛋糕做了xi个,则对于每种材料bi*xi<=ai. 对于dough ...

  3. leetcode 41 First Missing Positive ---java

    Given an unsorted integer array, find the first missing positive integer. For example,Given [1,2,0]  ...

  4. 骑士问题(knight) (BFS)

    题目描述 在一个标准8×8的国际象棋棋盘上,棋盘中有些格子可能是有障碍物的.已知骑士的初始位置和目标位置,你的任务是计算出骑士最少需要多少步可以从初始位置到达目标位置.有障碍物的格子当然不可以到达. ...

  5. phpwind8.7升级9.0.1过程(二)8.7正式升级9.0

    首先备份 1. 给本地做备份将网站根目录下面的所有文件先做备份. 2. 给本地数据库做备份 3. 了解升级的具体过程 phpwind8.7升级到9.0需要首先升级到phpwind9.0的原生版本即:2 ...

  6. 课堂所讲整理:HTML--6运算符、类型转换

    1.类型转换: 分为自动转换和强制转换,一般用强制转换. 其他类型转换为整数:parseint(): 其他类型转换为小数:parsefloat(): 判断是否是一个合法的数字类型:isNaN(): 是 ...

  7. VS2013远程调试功能

    我跪了,我真的跪了. 实际证明这是不可行的. [开发机] Win10,64bits,VS2013 [目标机] Winxp VS2013的debug tool不能在xp上安装运行,卒! 如果有win7, ...

  8. 另一个分区工具GNU的parted[转自vbird]

    利用 GNU 的 parted 进行分割行为 虽然你可以使用 fdisk 很快速的将你的分割槽切割妥当,不过 fdisk 却无法支持到高于 2TB 以上的分割槽! 此时就得需要 parted 来处理了 ...

  9. js的数组操作 splice

    原文:点击打开链接 1.作用:从指定位置删除部分元素并增加新的元素                1.1.该方法返回值是被删除的元素组成的数组                1.2.splice是直接 ...

  10. treap树及相关算法

    #include "stdafx.h" #include <stdio.h> #include <stdlib.h> #include <string ...