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数字加减插件 我们在网上购物提交订单时,在网页上一般会有一个选择数量的控件,要求买家选择购买商品的件数,开发者会把该控件做成可以通过点击实现加减等微调操作,当然也可以直接输入数字件数.本文 ...
随机推荐
- Xen虚拟机磁盘镜像模板制作(三)—CentOS 7
这里整理下制作Xen CentOS 7磁盘镜像模版的流程: 1.创建一个将要用来安装CentOS 7系统的LV,命令如下: [root@localhost ~]# lvcreate -L 5G -n ...
- iPhone不为人知的功能常用技巧,看完后才发现很多用iPhone的人实在是愧对乔布斯! - imsoft.cnblogs
很多人花了四五千买部苹果,结果只用到四五百块钱的普通手机功能. iPhone不为人知的功能,常用技巧: 网上搜集整理的iPhone快捷键操作,虽然表面上iPhone按键只有一个HOME键,大部分操作都 ...
- web相关问题总结 - imsoft.cnblogs
1,问题:编辑好的web程序乱码,显示不正常 解决方法:在head中加入一下代码,设置网页使用的语言为中文. <meta http-equiv="Content-Type" ...
- dede取子栏目时重复显示同级栏目的终极解决方法
使用channelartlist标签时,当栏目没有子栏目是,会出现重复同级栏目的问题,解决方法如下: 先看下面的代码{dede:channelartlist typeid='2'} {dede:ty ...
- codeforces 192a
link: http://codeforces.com/contest/330/problem/A brute force. /* ID: zypz4571 LANG: C++ TASK: 191a. ...
- php部分---include()与require()的区别、empty()与isset is_null的区别与用法详解
include()与require()的用途是完全一样的,不一定非得哪个放在最前面哪个放在中间.他们最根本的区别在于错误处理的方式不一样. 1.处理错误的方式: require()一个文件存在错误的话 ...
- AXIOM
AXIOM是一个实现了延迟构造和拉(pull parsing)解析的轻量级的xml解析器 http://reeboo.iteye.com/blog/317391 http://reeboo.iteye ...
- JavaWeb学习记录(十二)——商城购物之数据库操作的接口定义
一.基本接口,该项目中所有接口都继承它 package blank.dao; import java.util.List; public interface BaseDao<T,PK> { ...
- Codeforces Round #127 (Div. 2)
A. LLPS 长度最大10,暴力枚举即可. B. Brand New Easy Problem 枚举\(n\)的全排列,按题意求最小的\(x\),即逆序对个数. C. Clear Symmetry ...
- SVN代码提交冲突解决方案
SVN代码提交冲突解决方案 1.若你的代码被其他人修改并提交过了,期间你自己也修改过该文件,UPDATE的时候自己代码被覆盖. 右键——>显示日志 查看该文件的更新记录 找到需恢复的版本 右键— ...