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>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<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]');
if(t.val()==""||undefined||null){
t.val(0);
}
t.val(parseInt(t.val()) + 1)
setTotal();
})
$(".min").click(function() {
var t = $(this).parent().find('input[class*=text_box]');
if(t.val()==""||undefined||null){
t.val(0);
}
t.val(parseInt(t.val()) - 1)
if(parseInt(t.val()) < 0) {
t.val(0);
}
setTotal();
})
$(".text_box").keyup(function(){
var t = $(this).parent().find('input[class*=text_box]');
if(parseInt(t.val())==""||undefined||null || isNaN(t.val())) {
t.val(0);
}
setTotal();
})
function setTotal() {
var s = 0;
$("#tab td").each(function() {
var t = $(this).find('input[class*=text_box]').val();
var p = $(this).find('span[class*=price]').text();
if(parseInt(t)==""||undefined||null || isNaN(t) || isNaN(parseInt(t))){
t=0;
}
s += parseInt(t) * parseFloat(p);
});
$("#total").html(s.toFixed(2));
}
setTotal();
})
</script>
<style type="text/css">
input[type=number] {
-moz-appearance:textfield;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
</style>
</head>
<body>
<table id="tab">
<tr>
<td>
<span>单价:</span><span class="price">50.00</span>
<input class="min" name="" type="button" value="-" />
<input class="text_box" name="" type="number" value="" placeholder="0"/>
<input class="add" name="" type="button" value="+" />
</td>
</tr>
<tr>
<td>
<span>单价:</span><span class="price">25.50</span>
<input class="min" name="" type="button" value="-" />
<input class="text_box" name="" type="number" value="" placeholder="0"/>
<input class="add" name="" type="button" value="+" />
</td>
</tr>
</table>
<p>总价：<label id="total"></label></p>
</body>
</html>
效果预览
JQuery购物车多物品数量的加减+总价计算的更多相关文章
- 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实现购物车物品数量的加减特效
今天网友翠儿在用Jquery实现购物车物品数量的加减特效的时候遇到问题来问我,我后来帮她解决了这个Jquery特效,现在把它整理出来分享给大家用,虽然功能比较简单,但是很实用. 主要包括了以下功能: ...
- jQuery实现购物车物品数量的加减
基于jquery的一款代码,实现购物车数据的加减,在淘宝网.京东商城购物时时经常见到的一个功能,点击文本框两侧的“+”与“-”,就可以增加或减少文本框内的数字值,每次步长为1,当然这个是可以自己设置的 ...
- Jquery实现表单动态加减、ajax表单提交
一直在搞Java后台开发,记得刚工作那一两年时间搞过前后端交互开发,用的东西也是五花八门,当时觉得做页面展示给别人看,是很有成就的事情,不过现在感觉自己跟纯前端开发比起来弱爆了,不过如果你的目标是作为 ...
- web框架实现购物车数量加减
企业开发中经常是团队协作,每个人分配一个小的模块,比如说购物车模块,数量加减这一块人们首先想到的就是通过jquery实现,其实作为一个后端接口开发的程序猿也可以用自己更擅长的后端的逻辑代码来实现,那我 ...
- 自己动手丰衣足食之 jQuery 数量加减插件
引言 做一个手机端的订单相关项目中,其中下订单时需要用到数量加减的控件,可以设置默认值,也可以设置最大值和最小值.使用jQuery这么长时间了,平时很少去编写属于自己的插件,现在编写的时候对立面的一些 ...
- jQuery数字加减插件
jQuery数字加减插件 我们在网上购物提交订单时,在网页上一般会有一个选择数量的控件,要求买家选择购买商品的件数,开发者会把该控件做成可以通过点击实现加减等微调操作,当然也可以直接输入数字件数.本文 ...
- JavaScript 加减危机——为什么会出现这样的结果？
在日常工作计算中,我们如履薄冰,但是 JavaScript 总能给我们这样那样的 surprise~ 0.1 + 0.2 = ? 1 - 0.9 = ? 如果小伙伴给出内心的结果: 0.1 + 0.2 ...
随机推荐
- [十一集训] Day1 (2018-2019 ACM-ICPC Nordic Collegiate Programming Contest (NCPC 2018))
A Altruistic Amphibians 原题 题目大意: n只青蛙在高度为d的井中,每只有跳跃距离.重量和高度,每只青蛙可以借助跳到别的青蛙的背上而跳出井,每只青蛙能承受的最大重量是自身重量, ...
- MySQL中主键id不连贯重置处理办法
MySQL中有时候会出现主键字段不连续,或者顺序乱了,想重置从1开始自增,下面处理方法 先删除原有主键,再新增新主键字段就好了 #删除原有自增主键 ALTER TABLE appraiser_info ...
- AVR单片机教程——数字输入
我们已经学习了如何使用按键和拨动开关,不知你有没有好奇 button_down 和 switch_status 等函数是如何实现的.本篇教程带你一探究竟,让我们从按键的原理开始. 在原理图中,按键的符 ...
- leetcode两数相加
题目描述:给出两个 非空 的链表用来表示两个非负的整数.其中,它们各自的位数是按照 逆序 的方式存储的,并且它们的每个节点只能存储 一位 数字. 如果,我们将这两个数相加起来,则会返回一个新的链表来表 ...
- Mysql中HAVING的相关使用方法
having字句可以让我们筛选分组之后的各种数据,where字句在聚合前先筛选记录,也就是说作用在group by和having字句前. 而having子句在聚合后对组记录进行筛选.我的理解就是真实表 ...
- golang --iota 用法
package main import "fmt" func main() { const ( a = iota //0 b //1 c //2 d = "ha" ...
- 从Harbor仓库拉起镜像，创建容器并更新shell脚本
注意: 此shell脚本仅供基本使用,还有好多待完善的地方 大致流程 使用Jenkins从Gogs拉取仓库代码,根据选择的参数和输入的标签,确定要编译打包jar的模块,以及要制作的docker镜像信息 ...
- PDF时间戳 服务器
好用权威免费的PDF文件数字签名时间戳服务器URL http://tss.pki.gva.es:8318/tsa
- ADO.NET 七（一个例子）
通过一个完整的实例实现课程信息管理功能的操作,包括查询.修改.删除课程信息等操作. 1) 创建课程信息表 create table StuCourse ( id int primary key ide ...
- JavaScript常见的输出方式
1.通过弹窗的形式来输出 alert(需要输出的内容); alert("hello world"); confirm(需要输出的内容); prompt("请输入内容:&q ...