кредитный и ипотечный калькулятор

Кредитный калькулятор на JavaScript

Данный урок посвящен созданию простого калькулятора для расчета платежа по кредиту. Будем использовать для этого библиотеку JQuery UI, эффект slider. Калькулятор будет рассчитывать месячный платеж по кредиту по заданной ставке, сумме и сроке в годах. Входные данные будут связаны между собой и динамически рассчитывать платеж по кредиту. В расчете калькулятора учитывается простой процент, без капитализации. Хотя современные условия практически во всех банках подразумевают капитализацию процента. В дальнейших уроках, обязательно калькулятор будет доработан, чтобы учитывалась и капитализация процента.

Итак, создадим каркас – 3 блока для слайдеров:

Сумма кредита
Процентная ставка
Срок (лет)
Платеж в месяц


Подключаем необходимые библиотеки для использования JQuery UI slider – скрипты+стили:




Создадим стили для слайдеров, чтобы слайдеры не растягивались на всю страницу и имели отступы от краев:



Слайдер amount_slider – это сумма кредита, которая берется у банка/организации. Слайдер interest_slider – это процентная ставка в год. time_slider – это слайдер, который включает в себя срок кредита, в данном случае в годах.

Теоретический расчет платежа в месяц по кредиту рассчитывается таким образом:

коэффициент ставки процента = n%/100, где n – годовая процентная ставка.

сумма процентов в месяц = сумма кредита*коэффициент ставки процента*срок кредита и разделить на 12. При кредите в 500 $ и ставке 12% на один год, платеж процентов в месяц будет составлять 60/12=5. Тело кредита делится на количество месяцев и к каждому платежу прибавляется процент: 500/12 = 41,6 плюс процент 5 = 46,6$ общий платеж по кредиту. Приблизительно так.

Создаем слайдеры с исходными данными:

$(function () {
$("#amount_slider").slider({
orientation: "horizontal",
range: false,
min: 10000,
max: 2000000,
value: 100000,
step: 1000,
slide: function (event, ui) {
$("#amount").text(ui.value);
calculatePayment();
}
});
$("#amount").text($("#amount_slider").slider("value"));
$("#interest_slider").slider({
orientation: "horizontal",
range: false,
min: 1,
max: 50,
value: 12,
step: 0.25,
slide: function (event, ui) {
$("#interest").text(ui.value);
calculatePayment();
}
});
$("#interest").text($("#interest_slider").slider("value"));
$("#time_slider").slider({
orientation: "horizontal",
range: false,
min: 1,
max: 30,
value: 15,
slide: function (event, ui) {
$("#time").text(ui.value);
calculatePayment();
}
});
$("#time").text($("#time_slider").slider("value"));

});
Пройдемся по тем данным, которые нам позволяет устанавливать метод .slider():

min, max – границы допустимых значений слайдера, value – значение, которое устанавливается по умолчанию для слайдера при загрузке, функция slide запускает процесс изменения числа при движении бегунка, jquery функция .text() вставляет значение value бегунка в блок с соответствующим id.

Теперь создадим функцию с той логикой расчета процента, о которой указано выше:


function calculatePayment() {
var amount = $("#amount_slider").slider("value");
var interest = $("#interest_slider").slider("value")/1200;
var time = $("#time_slider").slider("value") * 12;
var rate = amount * (interest * Math.pow(1 + interest, time)) / (Math.pow(1 + interest, time) - 1);
$("#result").text(rate.toFixed(2));
}
calculatePayment();

Пройдемся по свойствам, которые содержит данная функция: amount – данные из блока с суммой кредита, interest – данные из блока процентной ставки, ставка делится на 100 и на 12 месяцев, либо сразу на 1200, time – срок кредита, rate – собственно говоря и является тем итогом расчета платежа по кредиту. В данной функции есть метод Math.pow(base,exponent), о котором я не упоминал. Math.pow(base, exponent) – это javascript функция, которая возвращает значение выражения основания, возведенного в указанную степень. Math.pow принимает два значения – base и exponent, которые являются значением основания выражения и значением экспоненты выражения соответственно. Метод toFixed(2); округляет число до 2 знаков после запятой.

Вот собственно и все. Здесь можно посмотреть демо – Простой кредитный калькулятор

Конечно, данный калькулятор не полноценен – нет дизайна и полей ввода с клавиатуры, но основной принцип, я думаю, совершенно понятен. В дальнейшем данный калькулятор я дополню полями и графиком на javascript.

Смотреть фильм онлайн

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *