【Code】JS-propertychange事件，实现实时金额计算

最新推荐文章于 2020-04-28 09:20:39 发布

Rookie_Shawn

最新推荐文章于 2020-04-28 09:20:39 发布

阅读量2.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： JS 前端

本文链接：https://blog.youkuaiyun.com/qq157962718/article/details/51155110

JavaScript 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个简单的HTML页面，用于输入充值金额，并通过JavaScript实时计算充值后的余额。文章提供了完整的HTML和JS代码示例，展示了如何使用正则表达式验证金额格式，以及如何监听输入框的变化来更新显示的余额。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前台页面

HTML代码

<div class="wrapper">
    <ul class="withdraw">
        <li>
            <span class="left">充值金额</span>
            <span class="right"><input type="tel" id='money_input' placeholder="输入充值金额" /></span>
        </li>
        <li>
            <p class="li-tip">充值成功后，余额达<em>￥</em><em class='money_num'>{$data.money}</em></p>
        </li>
    </ul>
</div>

JS代码

<script type="text/javascript">
    //绑定金额计算方法
    $('#money_input').bind('input propertychange',function(){checkMoneyForm()})
    //金额格式正则（小数点前十位，小数点后两位）
    var formMoney = /^((\d{1,10})|0)(\.\d{1,2})?$/;
    //输入过程需要小数点的话，有违反formMoney正则，所以添加一条小数点前十位并以"."结尾的正则
    var formMoneyFloat = /^((\d{1,10})|0)(\.)$/;
    //获取原金额
    var money_num = $('.money_num').html();
    //是否提交AJAX的状态
    var statusCheck = false;
    //检查金额格式并进行计算的方法
    function checkMoneyForm()
    {
        //获取输入框的金额
        var money_input = $('#money_input').val();
        //不符合格式
        if(!formMoney.test(money_input) && !formMoneyFloat.test(money_input))
        {
            $('.money_num').html(money_num);
            alert('请输入正确的金额');
            statusCheck = false;
        }
        else
        {
            //不为空且符合格式
            if(money_input != '')
            {
                //计算出的总数量，金额会出现小数点，所以用parseFloat(),否则+会被当做连接符
                var total_money = parseFloat(money_input) + parseFloat(money_num);
                $('.money_num').html(total_money);
                statusCheck = true;
            }
            //为空或不符合格式
            else if(money_input == '')
            {
                $('.money_num').html(money_num);
                statusCheck = false;
            }
        }
    }
</script>