今天网友翠儿在用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. iOS-UITableView性能优化

    使用不透明视图.     不透明的视图可以极大地提高渲染的速度.因此如非必要,可以将table cell及其子视图的opaque属性设为YES(默认值).其中的特例包括背景色,它的alpha值应该为1 ...

  2. 第二个Sprint冲刺第八天

    讨论地点:宿舍 讨论成员:邵家文.李新.朱浩龙.陈俊金 工作:更新了主界面

  3. break return

    用 break  跳出循环 用 return 跳出函数 用 continue 结束本次循环开始下次循环

  4. c++11编码规范 NULL还是nullptr

    0和nullptr/NULL 至于指针(地址值),根据实际选择用0.NULL还是nullptr.对使用了C++11特性的项目,选用nullptr:对于C++03项目,推荐NULL,因为它像是一个指针

  5. 读metronic文档学到的几个知识点

    1.RTL  同样的页面,它做了两套.为什么,因为在这个世界上,有些民族,有些语种,是从右向左来的. 2. google material design 同样的一套东西,又分别做了google mat ...

  6. ES6 — 数组Array

    ES6对数组引入了几个新函数: (1) Array.of() 作用是将一组数值,转换为数组. Array.of(1,2,3,4); //[1,2,3,4] (2) Array.from() 作用是把类 ...

  7. UVa 400

    一开始没怎么看懂题目,原来就是M字符就是这一列的宽度为M个字符,包括空格. #include<iostream> #include<algorithm> #include< ...

  8. 关于xmlhttprequest的readystate属性的五个状态

    http://www.cnblogs.com/jerry01/archive/2009/09/03/1559624.html 昨天做了一个利用 ajax实现页面无刷新的从服务器端获得时间的例子,当时对 ...

  9. console下纯字符实现的俄罗斯方块

    忙里偷闲,消遣一下,先上一张寒酸的效果图: 废话不多说,直接上代码,win7 64 code blocks编译通过. 吐槽一下cb的watch功能实在不够友好,不过免费的也不能要求太高. [按键说明] ...

  10. linux mount (挂载命令)详解

    挂接命令(mount) 首先,介绍一下挂接(mount)命令的使用方法,mount命令参数非常多,这里主要讲一下今天我们要用到的. 命令格式:mount [-t vfstype] [-o option ...