[jQuery.FQcomputer] 分期商城汇率计算器-优快云博客

本文介绍了一个基于jQuery的贷款及投资收益计算器插件的开发过程。该插件能够根据不同期限计算出借款人的每月还款额及投资人的月收益，并提供了详细的代码实现及样例。

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

2019独角兽企业重金招聘Python工程师标准>>>

##开发需求分析

屌丝逆袭期数借款人费用投资人收益 3个月 0.033 0.007 6个月 0.028 0.008 9个月 0.021 0.009 12个月 0.019 0.01 15个月 0.017 0.012 18个月 0.016 0.014

我帮您期数借款人费用投资人收益 1个月 0.037 0.016 2个月 0.035 0.0125 3个月 0.033 0.0111 4个月 0.031 0.0105 5个月 0.029 0.0101 6个月 0.028 0.0985 借款人费用固定包含固定0.006手续费和0.003保险费汇率计算表如上，计算方式如下，小明同学借了 100元，分6个月还，则每月需要还，（100x6x0.028+100）/ 6 = 19.46 元

jQeury 插件开发规范（相对于程序的功能，这才是重点）

先发两篇参考教程：

文章先是说了学习jQuery插件的基础，样式和脚本，感触颇多，在实现方式明确的情况下，优雅高效的代码显然更具吸引力。 http://blog.163.com/guoqiang_s/blog/static/167897871201131424023929
如果第一篇看不懂的话，可以先看下第二篇，更加通俗易懂些，http://www.iteye.com/topic/545971

最后的代码，做了对象级的扩展

计算器js代码

<!-- lang: js -->
(function($) {
    /*
    html tree
    */

    var defaults = {
        money:1000,
        months_loan:{1:0.037,2:0.035,3:0.033,4:0.031,5:0.029,6:0.028},
        months_profit:{1:0.016,2:0.0125,3:0.0111,4:0.0105,5:0.0101,6:0.00985},
        months:{},
        type:'loan',
        tips:'借款人费用固定包含固定0.006手续费和0.003保险费',
    }

    $.fn.FQcomputer = function(options) {     
        var compter = {};
        var el = this;   

        var init = function(){
            // 参数配置
            compter.settings = $.extend({}, defaults, options);

            if(compter.settings.type == 'loan'){
                compter.settings.months = compter.settings.months_loan;
            }else{
                compter.settings.months = compter.settings.months_profit;
            }

            // DOM 初始化
            htmlbody();
            el.cal_fee();

            // 事件绑定
            $(el).find('#cal_fee').on('click',function(){
                el.cal_fee();
                return false;
            });


            $(el).find('input,select').on('click',function(){
                el.cal_fee();
            });
        }

        var htmlbody = function(){
            if(compter.settings.type == 'loan'){
                str = '<form class="form-horizontal" role="form"> <div class="form-group"> <label class="col-md-4 control-label">借贷金额</label> <div class="col-md-8"> <input type="number" class="form-control"  value="{$money}"  id="money" placeholder="借贷金额"> </div> </div> <div class="form-group"> <label class="col-md-4 control-label">分期期数</label> <div class="col-md-8"> <select class="form-control" id="months"> {$months} </select> </div> </div> <div class="form-group" style="display:none;"> <div class="col-md-offset-4 col-md-8"> <span class="label label-success">每月利率：<span id="cp_rate"></span>%</span> </div> </div> <div class="form-group"> <div class="col-md-offset-4 col-md-8"> <span class="label label-success">每月还款：<span id="cp_screen"></span>元</span> </div> </div> <div class="form-group"> <div class="col-md-offset-4 col-md-8"> <span class="label label-success">还款总额：<span id="cp_screen_total"></span>元</span> </div> </div> <div class="form-group"> <div class="col-md-offset-4 col-md-8"> <button type="submit" class="btn btn-success" id="cal_fee">计算</button> </div> </div> </form>';
            }else{
                str = '<form class="form-horizontal" role="form"> <div class="form-group"> <label class="col-md-4 control-label">投资金额</label> <div class="col-md-8"> <input type="number" class="form-control"  value="{$money}"  id="money" placeholder="借贷金额"> </div> </div> <div class="form-group"> <label class="col-md-4 control-label">分期期数</label> <div class="col-md-8"> <select class="form-control" id="months"> {$months} </select> </div> </div> <div class="form-group" style="display:none;"> <div class="col-md-offset-4 col-md-8"> <span class="label label-danger">每月利率：<span id="cp_rate"></span>%</span> </div> </div> <div class="form-group"> <div class="col-md-offset-4 col-md-8"> <span class="label label-danger">每月本息：<span id="cp_screen"></span>元</span> </div> </div> <div class="form-group"> <div class="col-md-offset-4 col-md-8"> <span class="label label-danger">本息总额：<span id="cp_screen_total"></span>元</span> </div> </div> <div class="form-group"> <div class="col-md-offset-4 col-md-8"> <button type="submit" class="btn btn-danger" id="cal_fee">计算</button> </div> </div> </form>';
            }

            str = get_months(str);
            str = str.replace(/\{\$money\}/gi,compter.settings.money)

            el.html(str);
        }  

        // 获取分期数
        var get_months = function(str){
            months = compter.settings.months;
            temp = '';
            model = '<option value="{$op}">{$op}</option>';
            for(var item in  months){
                temp = temp + model.replace(/\{\$op\}/gi,item);
            }

            str = str.replace(/\{\$months\}/gi,temp);
            return str;
        }

        // 获取毛利率
        var get_rate = function(months){
            return compter.settings.months[months];
        }

        el.cal_fee = function(){
            money  = parseInt($(el).find('#money').val());
            months = parseInt($(el).find('#months').val());
            rate = get_rate(months);
            rate_percent = rate*100;
            res = money*months*rate + money;
            res_monthly = res/months;
            $(el).find('#cp_screen').html(res_monthly.toFixed(3));
            $(el).find('#cp_rate').html(rate_percent.toFixed(4));
            $(el).find('#cp_screen_total').html(res.toFixed(3));
            return res_monthly.toFixed(3);
        }

        el.help = function(){
            console.log('jQuery.FQcomputer.help');
        }

        init();

        return this;
    };  
})(jQuery);

html 模板代码

<!-- lang: html -->
<!-- 还贷表单 -->
<form class="form-horizontal" role="form">
  <div class="form-group">
    <label class="col-md-4 control-label">借贷金额</label>
    <div class="col-md-8">
        <input type="number" class="form-control"  value="{$money}"  id="money" placeholder="借贷金额">
    </div>
  </div>

  <div class="form-group">
    <label class="col-md-4 control-label">分期期数</label>
    <div class="col-md-8">
         <select class="form-control" id="months">
            {$months}
         </select> 
    </div>
  </div>


  <div class="form-group" style="display:none;">
    <div class="col-md-offset-4 col-md-8">
        <span class="label label-success">每月利率：<span id="cp_rate"></span>%</span>
    </div>
  </div>

  <div class="form-group">
    <div class="col-md-offset-4 col-md-8">
        <span class="label label-success">每月还款：<span id="cp_screen"></span>元</span>
    </div>
  </div>

  <div class="form-group">
    <div class="col-md-offset-4 col-md-8">
        <span class="label label-success">还款总额：<span id="cp_screen_total"></span>元</span>
    </div>
  </div>

  <div class="form-group">
    <div class="col-md-offset-4 col-md-8">
      <button type="submit" class="btn btn-success" id="cal_fee">计算</button>
    </div>
  </div>
</form>


<!-- 收益表单 -->
<form class="form-horizontal" role="form">
  <div class="form-group">
    <label class="col-md-4 control-label">投资金额</label>
    <div class="col-md-8">
        <input type="number" class="form-control"  value="{$money}"  id="money" placeholder="借贷金额">
    </div>
  </div>

  <div class="form-group">
    <label class="col-md-4 control-label">分期期数</label>
    <div class="col-md-8">
         <select class="form-control" id="months">
            {$months}
         </select> 
    </div>
  </div>


  <div class="form-group" style="display:none;">
    <div class="col-md-offset-4 col-md-8">
        <span class="label label-danger">每月利率：<span id="cp_rate"></span>%</span>
    </div>
  </div>

  <div class="form-group">
    <div class="col-md-offset-4 col-md-8">
        <span class="label label-danger">每月本息：<span id="cp_screen"></span>元</span>
    </div>
  </div>

  <div class="form-group">
    <div class="col-md-offset-4 col-md-8">
        <span class="label label-danger">本息总额：<span id="cp_screen_total"></span>元</span>
    </div>
  </div>

  <div class="form-group">
    <div class="col-md-offset-4 col-md-8">
      <button type="submit" class="btn btn-danger" id="cal_fee">计算</button>
    </div>
  </div>
</form>


<!-- 备用标签 -->
<div class="form-group">
  <div class="col-md-offset-4 col-md-8">
    <div class="checkbox">
      <label>
        <input type="checkbox"> Remember me
      </label>
    </div>
  </div>
</div>

转载于:https://my.oschina.net/plusman/blog/299100