<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输入框点击加减数值随之变动的更多相关文章

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

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

  2. 基于jQuery的input输入框下拉提示层(自动邮箱后缀名)

    基于jQuery的input输入框下拉提示层,方便用户输入邮箱时的提示信息,需要的朋友可以参考下     效果图   // JavaScript Document (function($){ $.fn ...

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

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

  4. Vue(小案例_vue+axios仿手机app)_购物车(二模拟淘宝购物车页面,点击加减做出相应变化)

    一.前言 在上篇购物车中,如果用户刷新了当前的页面,底部导航中的数据又会恢复为原来的: 1.解决刷新,购物车上数值不变                                         ...

  5. jquery获取input输入框中的值

    如何用javascript获取input输入框中的值,js/jq通过name.id.class获取input输入框中的value 先准备一段 HTML <input type="tex ...

  6. js与jquery获取input输入框中的值

    如何用javascript获取input输入框中的值,js/jq通过name.id.class获取input输入框中的value 先准备一段 HTML 一.jquery获取input文本框中的值 通过 ...

  7. 如何用jquery获取input输入框中的值?

    如何用jquery获取<input id="test" name="test" type="text"/>中输入的值? $(&q ...

  8. jquery 修改input输入框的 readOnly属性 && input输入框隐藏

    html的代码 <div class="control-group"> <label class="control-label required&quo ...

  9. jquery实现input输入框实时输入触发事件代码(点击历史记录也会触发)

    $("#email").bind('input propertychange', function() { if(/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0 ...

随机推荐

  1. 【LOJ】#3086. 「GXOI / GZOI2019」逼死强迫症

    LOJ#3086. 「GXOI / GZOI2019」逼死强迫症 这个就是设状态为\(S,j\)表示轮廓线为\(S\),然后用的1×1个数为j 列出矩阵转移 这样会算重两个边相邻的,只要算出斐波那契数 ...

  2. 「java.util.concurrent并发包」之 CAS

    一  引言 在JDK 5之前Java语言是靠synchronized关键字保证同步的,这会导致有锁 锁机制存在以下问题: (1)在多线程竞争下,加锁.释放锁会导致比较多的上下文切换和调度延时,引起性能 ...

  3. MFC控件使用大全

    https://blog.csdn.net/daoming1112/article/details/54698113

  4. 转SSL/TLS协议

    TLS名为传输层安全协议(Transport Layer Protocol),这个协议是一套加密的通信协议.它的前身是SSL协议(安全套接层协议,Secure Sockets Layer).这两个协议 ...

  5. 怎样修改输入框 placehoder 提示文本的颜色?

    1. 在这个问题上, 不同浏览器的设置方法有所差异, 可以写成下面这种形式. ::-webkit-input-placeholder { /* WebKit browsers */ color: #9 ...

  6. unity 打包Error:WebException: The remote server returned an error: (403) Forbidden.

    記一下在ios上打包出錯: UnityEditor.BuildPlayerWindow+BuildMethodException: 2 errors at UnityEditor.BuildPlaye ...

  7. 解压版msyql8.0的安装和配置

    一.环境变量配置 变量名:MYSQL_HOME 变量值:D:\mysql-8.0.12-winx64\bin 然后在Path变量开头添加%MYSQL_HOME%:然后确定保存即可: 二.配置my.in ...

  8. (三)创建基于maven的javaFX+springboot项目创建

    创建基于maven的javaFx+springboot项目有两种方式,第一种为通过非编码的方式来设计UI集成springboot:第二种为分离用户界面(UI)和后端逻辑集成springboot,其中用 ...

  9. VLC播放各种源

    RTSP    rtsp://admin:Shws1610@192.168.1.33:554/channel/01 UDP 播放推导本机上的udp流 : udp://@:1234 播放其他机器上的ud ...

  10. opencv+ linux + cmake 生成 opencv静态库

    您可以省去如下步骤,直接下载我编译好的: http://download.csdn.net/detail/u011258240/9710331 一.编译opencv2.4  不带contrib 1. ...