在抵押贷款计算器中添加小数位

时间:2018-10-04 15:48:17

标签: html calculator

我需要在此抵押计算器的输出中添加小数位。有人看到我怎么做吗?

我没有这种编码的经验,这是我需要建立朋友网站的一种方式。

热爱学习所有功能,但这似乎特别棘手。

问题是代码运行,答案不是两位小数。哪一种打败了抵押计算器的目的

 
      <section class="light-section">
            <div class="inner">
          <div class="mid-inner">
                    <h1><?php the_sub_field('title'); ?></h1>
                    <?php the_sub_field('text'); ?>
                </div>
          <div class="mortgage-calculator">
                    <div id="mortgage-calculator" class="mortgage-calculator">
                        <div class="form-row cf">
                            <input type="range" id="payback-period" min="<?php the_sub_field('payback_period_min'); ?>" max="<?php the_sub_field('payback_period_max'); ?>" step="1">
                            <label class="cf" for="payback-period">Mortgage Payback Period (Years)<br><input type="number" class="number" min="<?php the_sub_field('payback_period_min'); ?>" max="<?php the_sub_field('payback_period_max'); ?>" step="1"></label>
                        </div>
                        <div class="form-row cf">
                            <input type="range" id="loan-amount" min="<?php the_sub_field('loan_amount_min'); ?>" max="<?php the_sub_field('loan_amount_max'); ?>" step="5000">
                            <label class="cf" for="loan-amount">Loan Amount (£'s)<br><input type="number" class="number" min="<?php the_sub_field('loan_amount_min'); ?>" max="<?php the_sub_field('loan_amount_max'); ?>" step="5000"></label>
                        </div>
                        <div class="form-row cf">
                            <input type="range" id="interest-rate" min="<?php the_sub_field('interest_rate_min'); ?>" max="<?php the_sub_field('interest_rate_max'); ?>" step="0.01">
                            <label class="cf" for="interest-rate">Interest Rate (%)<br><input type="number" class="number" min="<?php the_sub_field('interest_rate_min'); ?>" max="<?php the_sub_field('interest_rate_max'); ?>" step="0.01"></label>
                        </div>
                        <div class="mortgage-calculator-results cf">
                            <div class="left">
                                <p>Your monthly payments would be</p>
                            </div>
                            <div class="right">
                                <div class="result">$<span></span></div>
                            </div>
                        </div>
                    </div>
                </div>
        </div>
      </section>

      <script>
        (function($) {
          $(document).ready(function() {

            $.fn.digits = function(){
                return this.each(function(){
                    $(this).text( $(this).text().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,") );
                })
            }

            $('.mortgage-calculator .form-row').each(function() {
                var val = $(this).find('input[type="range"]').val();
                $(this).find('.number').val(val);
            });
            $('input.number').each(function() {
                var min = $(this).attr('data-min');
              var max = $(this).attr('data-max');
            });
            if(Modernizr.smil) {
              $('input[type="range"]').on('input', function() {
                    var val = $(this).val();
                    $(this).parent().find('.number').removeClass('alert').val(val);
                    updateTotal();
                });
            }
            else {
              $('input[type="range"]').on('change', function() {
                    var val = $(this).val();
                    $(this).parent().find('.number').removeClass('alert').val(val);
                    updateTotal();
                });
            }

            $('.number').on('input', function() {
                var val = parseFloat($(this).val());
              var min = parseInt($(this).attr('min'));
              var max = parseInt($(this).attr('max'));
              if(val < max) {
                $(this).parent().parent().find('input[type="range"]').val(val);
                $(this).removeClass('alert');
                    updateTotal();
              }
              else {
                $(this).addClass('alert');
                $(this).val(max)
                $(this).parent().parent().find('input[type="range"]').val(max);
              }
            });
            $('input[type="range"]').change(function() {
                $(this).blur();
            });


            function updateTotal() {
                var years = parseInt($('#payback-period').val());
                if(years > 0) {
                        var totalMonths = years * 12,
                  loan = parseInt($('#loan-amount').val()),
                        annualInterest = parseFloat($('#interest-rate').val()),
                  monthlyInterest = (annualInterest / 100) / 12,
                  monthlyInterestplusone = 1 + monthlyInterest,
                        perMonth = loan * (monthlyInterest * Math.pow(monthlyInterestplusone,totalMonths)) / (Math.pow(monthlyInterestplusone,totalMonths) - 1),
                        resultMonthPretty = perMonth.toFixed(0);
                    $('.result span').text(resultMonthPretty).digits();
                }
                else {
                   $('.result span').text('0');
                }
            }

            function updateTotalOld() {
                var years = parseInt($('#payback-period').val());
                if(years > 0) {
                        var loan = parseInt($('#loan-amount').val()),
                        interest = parseInt($('#interest-rate').val()),
                        perYear = loan / years,
                        interestValYear = (perYear / 100) * interest,
                        interestValTotal = interestValYear * years,
                        loanANDinterestTotal = loan + interestValTotal,
                        perYearTotal = loanANDinterestTotal / years,
                        perMonth = perYearTotal / 12,
                        resultMonthPretty = perMonth.toFixed(0);
                    $('.result span').text(resultMonthPretty).digits();
                }
                else {
                   $('.result span').text('0');
                }
            }

            updateTotal();

          });
        })( jQuery );
      </script>

0 个答案:

没有答案