Давно зрела потребность добавить кредитный калькулятор. Он будет полезен программистам, которым поручили сделать сайт, например, для кредитной компании. Также пригодится студентам экономистам и финансистам, которым надо решать задачки про кредиты и процентные выплаты по ним.
Представленный здесь калькулятор позволит не только получить оценку суммы, которую придется отдать в итоге, получив займ, но и выдаст таблицу с выплатами процентов и остатки по кредиту. Удобная форма, комментарии по колонкам таблицы помогут вам разобраться в том, что и за что придется платить.
Кредитные калькуляторы онлайн очень востребованы и относятся к онлайн софту, который часто размещают на сайтах. Поэтому, начинающий программист или веб-программист просто обязан хотя бы раз написать свой собственный калькулятор для вычисления выплат по процентным ставкам. Приведенный здесь калькулятор всего лишь пример того, как может выглядеть ваш кредитный калькулятор. Современная мода - использовать ползунки для ввода данных в калькуляторах. Кстати, не всегда адекватно работает в браузерах мобильных устройств.
Мес. | Всего | % по кредиту | В погашение долга | В погашение процентов | Остаток |
---|
Помните, получить кредит не так сложно, как его потом погашать.
Если вас заинтересовал приведенный тут калькулятор, то приводим фрагменты кода, достаточные, чтобы создать что-то подобное.
Начнем с формы ввода данных.
<form id="credit">
<div>
<div>Размер кредита</div>
<div><input id="amount" type="number" min="100" max="500000" pattern="[0-9]{2,5}"
required title="Введите сумму кредита"/></div>
<div>грн</div>
</div>
<div>
<div>Процентная ставка по кредиту</div>
<div><input id="interest" type="text" pattern="[0-9]{1,2}([\.\,][0-9]{1,2})?"
required title="Введите процентную ставку по кредиту"/></div>
<div>
<select id="interest_term" title="Введите процентную ставку по кредиту">
<option value="month">% в мес.</option>
<option value="year">% в год</option>
</select>
</div>
</div>
<div>
<div>Срок кредита</div>
<div><input id="maturity" type="number" min="1" max="48" pattern="[0-9]{1,2}" required title="Введите срок кредита"/></div>
<div>
<select id="maturity_unit" title="Выберите периодичность начисления процентов">
<option value="month">мес.</option>
<option value="year">лет</option>
</select>
</div>
</div>
<div id="buttons">
<button type="submit" id="calculate">Считать </button>
<button type="button" id="reset">Сбросить</button>
</div>
</form>
Дальше приведем код контейнера (таблицы), в которую будут выводиться результаты:
<table id="customers" cellspacing="0" style="text-align:center">
<thead>
<tr>
<th style="text-align:center">Мес.</th>
<th style="text-align:center">Всего</th>
<th style="text-align:center">% по кредиту</th>
<th style="text-align:center">В погашение долга</th>
<th style="text-align:center">В погашение процентов</th>
<th style="text-align:center">Остаток</th>
</tr>
</thead>
<tbody id="months"></tbody>
</table>
Ну и в завершение - сами скрипты для вычисления:
<script>
function calculate(amount, interest, maturity) {
var table = $('#months');
table.empty();
var vat_amount = amount * 1.2; // стоимость оборудования * 1.2 = сумма с ПДВ
var bank_service = vat_amount * 0.016; // сумму с ПДВ *1.6= % банка за услуги
var credit = vat_amount + bank_service; // сумма с ПДВ +%банка = тело кредита (кредит)
var monthly_paid = credit / maturity; // кредит / срок погашения = сумму к уплате ежемесячно
for (var month = 1; month <= maturity; month++) {
var row = $('<tr></tr>');
function cell(value, round) {
if (isNaN(value) || !isFinite(value))
value = 'ошибка';
else if (round)
value = Math.ceil(value);
else {
var c = Math.ceil(value * 100) / 100;
var r = Math.floor(c);
var coins = Math.ceil((c - r) * 100);
coins = ',' + (coins + '00').slice(0, 2);
coins = '<span>' + coins + '</span>';
value = Math.floor(value) + coins;
}
$('<td></td>').html(value)
.appendTo(row);
}
cell(month, true);
cell(credit);
var loan = credit * interest / 100; // кредит * 1,9% = % по кредиту
cell(loan);
cell(monthly_paid);
var monthly_fee = monthly_paid + loan; // сумма к уплате ежемесячно+ % по кредиту = ежемесячный взнос
cell(monthly_fee);
credit -= monthly_paid;
cell(month < maturity ? credit : 0);
table.append(row);
}
}
function reset() {
var list = location.hash ? location.hash.slice(1) : false;
list = list ? list.split('|') : [];
$('#amount').val( list[0] || localStorage['amount'] || 5000);
$('#interest').val(list[1] || localStorage['interest'] || 3);
$('#maturity').val(list[2] || localStorage['maturity'] || 6);
if (0 == list.length) {
if ('year' == localStorage['interest_term'])
$('#interest_term').val('year');
if ('year' == localStorage['maturity_unit'])
$('#maturity_unit').val('year');
}
}
$(document).ready(function() {
reset();
$('#reset').click(reset);
$('#credit').submit(function(e) {
e.preventDefault();
var interest = $('#interest').val();
interest = interest.replace(',', '.');
if ('year' == $('#interest_term').val())
interest /= 12;
var maturity = $('#maturity').val();
if ('year' == $('#maturity_unit').val())
maturity *= 12;
calculate($('#amount').val(), interest, maturity);
e.isDefaultPrevented = true;
});
});
$(window).unload(function() {
localStorage['amount'] = $('#amount').val();
localStorage['interest'] = $('#interest').val();
localStorage['maturity'] = $('#maturity').val();
localStorage['interest_term'] = $('#interest_term').val();
localStorage['maturity_unit'] = $('#maturity_unit').val();
});
</script>
Стили для оформления кредитного калькулятор тут не приводятся.