您的位置:首页 > 网页制作 > 心得技巧

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

作者: 来源:

2023-05-27 21:41:38

<div class="clearbox"></div>
<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>
<div class="clearbox"></div>
</div>



<script type="text/javascript" src="jquery-1.7.2.min.js"></script>


<script type="text/javascript">
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();  //手动输入数值金额随之改变
});
});
</script>
 

猜你喜欢

01 $agent = strtolower($_SERVER[&#39;HTTP_USER_AGENT&#39;]); if(strpos($agent, &#39;iphone&#39;) || strpos($agent, &#39;ipad&#39;)){ echo &#39;苹果系统&#39;; }elseif(strp

2023-06-21 20:21:59

<!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> <met

2023-05-31 14:53:00

<div class="clearbox"></div> <input class="addBtn min" type="button" value="-" /> <input class="join-money" type="text" value="1"> <input class="addBt

2023-05-27 21:41:38

<!DOCTYPE html> <html> <head> <title>JS滚动条判断是否滑动到顶部底部</title> <script type="text/javascript" src="style/js/jquery.js"></script> </head> <body> <div class="d" s

2023-05-21 14:24:17

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script> <

2023-04-07 15:26:51

<style type="text/css"> html { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter:progid:DXImageTr

2022-12-07 08:27:45

如果你网站是https的,bshare等社会化分享代码无效,不显示,加上下面一句代码即可: <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />

2022-04-23 22:12:13

slq把字段里的abc.com替换成vedanc.com update phome_enewskey set keyurl=replace(keyurl,'abc.com','vedanc.com');

2021-08-01 15:54:02

php替换图片里面alt和title内容的方法

2021-04-02 14:34:28

 针对PHP Fast CGI解析漏洞,建议修改 php.ini文件,将cgi.fix_pathinfo的值设置为0。

2020-12-30 16:22:56

© 2007-2021 建站技术网版权所有联系QQ:2140427459