jquery实现input输入框点击加减数值随之变动

<input class="addBtn min" type="button" value="-" />
<input class="join-money" type="text" value="1">
<input class="addBtn add" type="button" value="+" />
<span class="total">¥<span class="allMoney">10000</span></span>
<p class="money-tip">(每份金额10000元)</p> js:
var t = $(".join-money");
var m = $(".allMoney").text();
var mm = $(".allMoney");
function updateMoney(){
var tt = t.val();
var total = m*tt; //输入框中的份额数与每份金额数相乘得到总金额
mm.text(total);
if(t.val()<=0){
mm.text(m);
}
}
$(function(){
$(".add").click(function() {
t.val(parseInt(t.val()) + 1); //点击加号输入框数值加1
updateMoney(); //显示总金额
});
$(".min").click(function(){
t.val(parseInt(t.val())-1); //点击减号输入框数值减1
if(t.val()<=0){
t.val(parseInt(t.val())+1); //最小值为1
}
updateMoney();
});
$(".join-money").keyup(function(){
var c=$(this);
if(/[^\d]/.test(c.val())){//替换非数字字符
var amount=c.val().replace(/[^\d]/g,'');
$(this).val(amount);
}
updateMoney(); //手动输入数值金额随之改变
});
});
jquery实现input输入框点击加减数值随之变动的更多相关文章
- jQuery实现购物车多物品数量的加减+总价计算
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. ...
- 基于jQuery的input输入框下拉提示层(自动邮箱后缀名)
基于jQuery的input输入框下拉提示层,方便用户输入邮箱时的提示信息,需要的朋友可以参考下 效果图 // JavaScript Document (function($){ $.fn ...
- jQuery实现购物车多物品数量的加减+总价+删除计算
<?php session_start(); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E ...
- Vue(小案例_vue+axios仿手机app)_购物车(二模拟淘宝购物车页面,点击加减做出相应变化)
一.前言 在上篇购物车中,如果用户刷新了当前的页面,底部导航中的数据又会恢复为原来的: 1.解决刷新,购物车上数值不变 ...
- jquery获取input输入框中的值
如何用javascript获取input输入框中的值,js/jq通过name.id.class获取input输入框中的value 先准备一段 HTML <input type="tex ...
- js与jquery获取input输入框中的值
如何用javascript获取input输入框中的值,js/jq通过name.id.class获取input输入框中的value 先准备一段 HTML 一.jquery获取input文本框中的值 通过 ...
- 如何用jquery获取input输入框中的值?
如何用jquery获取<input id="test" name="test" type="text"/>中输入的值? $(&q ...
- jquery 修改input输入框的 readOnly属性 && input输入框隐藏
html的代码 <div class="control-group"> <label class="control-label required&quo ...
- jquery实现input输入框实时输入触发事件代码(点击历史记录也会触发)
$("#email").bind('input propertychange', function() { if(/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0 ...
随机推荐
- mybatis报错无法扫描到xml文件
错误:java.io.IOException: Could not find resource com/xxx/xxxMapper.xml 原因:target目录下没有***.xml文件 解决方法:在 ...
- Treasure Island(两遍dfs)-- Codeforces Round #583 (Div. 1 + Div. 2, based on Olympiad of Metropolises)
题意:https://codeforc.es/contest/1214/problem/D 给你一个n*m的图,每次可以往右或者往下走,问你使(1,1)不能到(n,m)最少要放多少 ‘ # ’ . 思 ...
- UAV图像拼接软件编译环境配置
1,需要下载的软件: 依次安装qt-opensource.addin qt安装目录为C:\Qt\4.8.6 2,vs2010配置 *配置UAVBeta工程的属性,下图黑色字体部分与qt相关,取决于你的 ...
- raspberrypi 树莓派 内核编译
相关版本信息 硬件:树莓派 2b 目标系统: linux 编译环境:ubuntu 14.4 32bit 用户路径:/home/hi/ 安装交叉编译链 cdmkdir pi/kernelcd pi/ke ...
- 牛客 40E 珂朵莉的数论题
大意: 给定$x,y$, 求第$x$小的最小素因子为$y$的数, 若答案>1e9输出0. 若$y>=60$, 可以暴力筛出1e9/60以内的答案. 否则容斥+二分算出答案. #includ ...
- nginx + uwsgi 部署django项目
因项目需求,需要部署django项目,这里是基础的nginx配合uwsgi部署django,后续会采用docker部署的方式 环境: centos7 python3.5.4 django2.1.4 u ...
- PS 中混合模式
1.正常模式 2. 溶解 3. 变暗 : 把两幅图中较暗的区域显示出来 4.正片叠底 总体变暗,把图层中较浅的颜色由下一图层较深的颜色显现(和滤色相反) 7. 深色 取较小的颜色 8. ...
- 关于mysql事务的几件小事
零.MyISAM和InnoDB关于锁的区别 ①MyISAM默认用的是表级锁,不支持行级锁. ②InnoDB默认用的是行级锁,也支持表级锁. ③共享锁和排它锁的兼容性 |X|排它锁|共享锁| -|-|- ...
- redis集群+JedisCluster+lua脚本实现分布式锁(转)
https://blog.csdn.net/qq_20597727/article/details/85235602 在这片文章中,使用Jedis clien进行lua脚本的相关操作,同时也使用一部分 ...
- vue项目 时间戳转 格式
项目用了 element UI的日期插件,修改时 时间回显不了,打印出来是换行了,因此要转换 changeTime(value){ let date = new Date(value); let y ...