zoukankan      html  css  js  c++  java
  • 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(); //手动输入数值金额随之改变
    });
    });

  • 相关阅读:
    低落
    栗子
    Wireless Password HDU
    考研路茫茫——单词情结 HDU
    DNA Sequence POJ
    HDU 6138 Fleet of the Eternal Throne 多校#8 AC自动机
    Rikka with Candies HDU
    Wavel Sequence HDU
    Counting Divisors HDU
    Codeforces Round #424 E. Cards Sorting 线段树/数据结构瞎搞/模拟
  • 原文地址:https://www.cnblogs.com/yehx/p/6382511.html
Copyright © 2011-2022 走看看