ипотечный калькулятор скрипт для сайта
Как написать ипотечный калькулятор на javascript?
При разработке сайта строительной компании часто возникает необходимость помимо выбора квартиры дать возможность клиенту воспользоваться ипотечным или кредитным калькулятором. С помощью него чаще всего предлагается посчитать один из двух вариантов:
В статье мы рассмотрим, как на javascript написать такой калькулятор, но сначала рассмотрим формулы, по которым всё и рассчитывается.
В последнее время банки рассчитывают ипотеку по аннуитетной схеме погашения. Такой схемой пользуются, например, Сбербанк, ВТБ24 и другие крупные банки. Дифференцированная схема встречается редко, поэтому её рассматривать в рамках этой статьи не будем.
Если рассматривать понятие аннуитетных платежей, то можно охарактеризовать такую схему погашения так: ежемесячно заемщик вносит одинаковую сумму денег, одна часть идёт на погашения задолженности перед банком, а вторая часть — в качестве оплаты процентов за использование кредитных средств банка.
Ежемесячный платёж
Ежемесячный платёж вычисляется по следующей формуле:
Формула вычисления аннуитетного платежа
В формуле приняты следующие обозначения: P – ежемесячный платеж, S – сумма кредита, i – процентная ставка в месяц, n – срок кредита в месяцах.
На основе формулы не составит труда написать js-функцию, которая принимает на вход три аргумента — сумму, период и ставку.
Стоит отметить, что при очень больших значениях периода функция возвращает Nan, поэтому следует ограничивать входные данные. Чаще всего банки не дают ипотеку более чем на 30 лет, а с такими значениями функция справляется хорошо.
Используя пару правил математики из школьного курса выразим из вышеприведенной формулы срок кредита n:
Формула периода погашения при аннуитетном платеже
Обозначения в формуле те же самые, что были приняты выше.
Для проверки правильности подсчётов лучше всего использовать стандартные функции ПЛТ и КПЕР в Excel — скачать xlsx-файл с формулами проверок.
Готовый пример можно посмотреть по ссылке на демо.
PHP скрипт ипотечного калькулятора
В рамках работы над очередным крупным порталом посвященного недвижимости, был написан скрипт, вернее даже целый компонент «Профессиональный ипотечный калькулятор«. Сразу оговорюсь, что сама идея не нова, и мы в качестве образца решили использовать модель калькулятора с сайта (информация была скрыта по просьбе трудящихся). Иными словами задача стояла следующая: — «Сделать полную копию, аналог этому калькулятору». Разумеется аналог получился схожим лишь только визуально, для пользователя. Все обслуживающие скрипты, формулы и процессы интеграции калькулятора в уже работающую CMS были уникальны.
Подробно о работе ипотечного калькулятора.
Калькулятор был полностью написан на PHP, часть визуального оформления, я именно HTML и CSS были позаимствованы у так называемого донора (минимализм до нельзя). Так же наш калькулятор, в процессе расчетов обращается к базе mySQL для получения курсов нужных нам валют — USD, EUR (предварительно эти и многие другие курсы валют, заносятся в базу, ежечасно, специально написанным парсером).
Алгоритм работы
Пользователь переходит на страницу калькулятора и в соответствующей форме указывает все исходные значения для расчетов. Но предварительно выбрав тип расчета:
Далее в зависимости от типа расчета, пользователь указывает «Стоимость квартиры» или «Ежемесячный платеж«. Заполняет поля «Первоначальный взнос«, «Ставка кредита» (в процентах) и «Срок кредитования» (кол-во лет). Так же пользователь может указать предпочитаемую валюту на против каждого поля, это может быть весьма удобным при покупке недвижимости за рубежом. Ипотечный калькулятор сам пересчитает всё, по текущему курсу валют.
Формулы по которым производится расчет
Для расчета и построения графика платежей исходя из известной цены квартиры, с отображением ежемесячного платежа (с отдельными выводом процентов по кредиту и суммы погашения основного долга), используются формула для «Погашение кредита аннуитетными платежами» взятая с сайта banki.ru за что ему отдельное спасибо.
t— количество периодов оплаты;
Кр — сумма кредита;
k — процентная ставка, начисляемая на задолженность за период;
BK — размер платежа за i — й период (i принимает значения от 1 до t);
Вычисляем общую сумму кредита, которую пользователь сможет получить (из сумму вычтены проценты, за пользование кредитом)
BK=Кр * k * (1+k)^t / ((1+k)^t — 1)
Для расчета и постарения графика исходя из ежемесячных платежей, используется формула:
Кр = BK * ((1+k)^t — 1) / (1+k)^t / k
Построение графиков
Все графики строятся с использованием библиотеки Google jsAPI из Google Chart Tools. Раньше мне не приходилось работать с этим замечательным инструментом, но тем не менее его удалось в течении получаса интегрировать в калькулятор и начать его использование. Стоит заметить, что с помощью этой библиотеки можно строить графики любых типов (например Pie Chart, Line Chart, Column Chart, Area Chart, Tree Map, Controls and Dashboards и прочие).
Приведу несколько скриншотов получившихся графиков:
Контроль ввода.
Прочие функции.
После произведения расчетов, для удобства пользователя также предусмотрена возможность вывода страницы для последующей её печати на принтере. С помощью CSS отсекаются все ненужные блоки и меню сайта.
Кроме всего, пользователь может отредактировать введенные им значения, капелька юзабилити в этом плане не повредит.
Онлайн-калькулятор на сайт: выбор готового виджета
UPDATE: 29 июня 2021
Добавлены новые виджеты калькуляторов.
Мы уже привыкли к виджетам на сайтах. Выпрыгиваюшие онлайн-консультанты и кнопки обратного звонка. Предлагаю к ознакомлению еще один интересный способ собирать заявки на сайте — онлайн-калькуляторы. Конечно, можно заказать разработку собственного калькулятора, но есть сервисы, предоставляющие готовые решения. Это отличный способ быстро внедрить и протестировать новый инструмент на сайте.
Где применить онлайн-калькулятор?
В некоторых отраслях калькуляторы на сайтах начали применяться задолго до моды на «виджетизацию». Например, в строительных услугах и продаже строй-материалов:
Другие сферы, где очень часто можно встретить онлайн-расчеты: кредиты, страховка, продажа автомобилей, продажа билетов и туров, службы такси и грузоперевозок, клининг и так далее. Калькулятор можно внедрить практически в любую сферу бизнеса. Это добавит сайту интерактива и поможет собирать больше заявок.
Чтобы открыть сервис в новой вкладке — нажмите на заголовок.
Moclients.com
Сервис состоит из 6 виджетов для сайта. Среди них есть онлайн-калькулятор. На самом деле это не калькулятор — просто форма сбора заявок с шагами. В нем не производятся никакие расчеты. Клиенты проходит шаг-1, шаг-2, шаг-3 и получают предложение отправить результат на их почту.
Работает? — Да. Очень рекомендую протестировать данный сервис в сравнении с нижеприведенными калькуляторами. В моей практике был случай, когда на сайте по ремонту квартир, онлайн-калькуляция с реальными ценами сильно «уронила» объем получаемых заявок. Любой из виджетов в этой статье считает грубее человека. Такие расчеты могут отпугнуть потенциального клиента + нет возможности сгладить цену другими факторами при первом телефонном контакте. Так называемый contact wall — «оставь контакты и получи», работает практически всегда.
Вернемся к Моклиентс. В вашем распоряжении есть бесплатная версия любого виджета на любое количество сайтов, но при этом c ограничением в 10 заявок/месяц. Платная версия любого калькулятора для 1 сайта стоит 490 рублей /месяц + 2 недели бесплатного использования.
Можно настроить цели и передавать события в Яндекс Метрику и Google Analytics.
Сайт предоставляет 5 различных способов оплаты, техническая поддержка быстро консультирует через чат или почту. Я сам пользуюсь этим виджетом несколько месяцев и мой отзыв: стоит попробовать. Встречались ошибки в программной/фронт-енд части, но их довольно быстро устраняли. Интерфейс админ-панели можно назвать «сыроватым».
uCalc.pro
Сервис от легендарного конструктора сайтов Ucoz. У этого калькулятора есть три важных преимущества.
Слово «бесплатно» — одно из самых используемых на посадочной странице. Бесплатный тариф ограничен 100 E-mail уведомлениями, отсутствием возможности редактировать код калькулятора, присутствием копирайта и т.д.
FormDesigner
Многофункциональный конструктор форм. В простом редакторе можно собрать опросы, квизы, калькулятор и различные веб-формы заявки. Отличительная особенность — огромное количество шаблонов под все сферы бизнеса.
Каждый шаблон можно отредактировать:
ФормДизайнер — полноценный калькулятор с формулами, он действительно может считать. Для расчета значения в конструкторе есть специальный элемент «Формула», в котором можно настроить самые сложные формулы.
При этом сами формы имеют качественный дизайнер, а интерфейс настройки максимально простой. Можно интегрировать формы с сервисами E-mail рассылки, CRM и CMS-системами. Интеграций много. Мы написали отдельный обзор на данный сервис.
Calccreator.com
Сalccreator.com – это настоящий drug-n-drop конструктор калькуляторов. Вам придется собирать виджет по кнопочкам, флажочкам и другим элементам. С 0, никаких шаблонов здесь нет. Потребуется выдержка и талант. Плюсом этого калькулятора для сайта можно назвать полную гибкость. Можно собирать варианты с любыми формами, слайдерами, выпадающими списками и т.д. При большом желании можно получить целый интернет-магазин. Дизайн прихрамывает на обе ноги.
Можно скачать получившийся код или вставить его на сайт через iframe. Этот сервис отлично подойдет разработчикам или веб-мастерам, которые хотят создавать для своих клиентов сложные конструкторы и передавать исходный код.
Есть 5 бесплатных проектов. Дальше 1 месяц будет стоить 795 руб, 3 месяца — 1390, 6 месяцев – 1810 руб.
BitCalc
Конструктор BitCalc, представляет сайт Bitronica.com. Рекордсмен по сложности. Начиная с покупки, заканчивая настройкой.
Дизайна как такового нет. Но наиболее удобным признаётся выбор любого калькулятора прямо из имеющегося набора шаблонов, пока без привязки к конкретному сайту. Пользователь просто выбирает шаблон, указывает его параметры и «опускает в корзину». Таким образом, появляется возможность собрать целый пакет, который можно будет потом распределить по сайтам.
Любой созданный калькулятор имеет бесплатный начальный период использования – 14 дней. В дальнейшем устанавливается стоимость в 240 руб за месяц на один сайт. Протестировать виджет до принятия окончательного решения можно и бесплатно.
Есть дополнительные виджеты – форма заказа, всплывающее окно акции, подписка на рассылку, каталог продукции.
Web-forms.ru
Сервис от создателей CMS Webasyst. Данный конструктор ориентируется на реализацию форм любого назначения. Можно строить формы заказов, опросов, обратной связи.
В течение 14 дней любой виджет можно использовать бесплатно, далее аренда в месяц одного виджета на одном сайте – 659 рублей. Приобретение при неограниченном сроке использования и постоянной технической поддержке — 2999 руб.
Вывод
Я бы рекомендовал поочередно попробовать на своем сайте виджеты калькуляторов от Moclients и uCalc. Первый, собирающий заявки, второй, производящий реальные расчеты. Обязательно проработать дизайн, шаги, настроить интеграцию с Яндекс Метрикой/Google Analytics для отслеживания эффективности. Если вы планируете разрабатывать калькуляторы своими руками, для клиентов под заказ, и вам важно получить исходный код — Calccreator.
Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.
Кредитный калькулятор on-line для Вашего сайта
Здравствуйте, друзья! С вами Павел Макаров. Сегодня кредиты прочно вошли в нашу жизнь и многие из нас просто не представляют, как совершать дорогие покупки без кредита… А вот как рассчитать кредит знают далеко не все, обычно всецело доверяя сотрудникам банка.
В этой статье я расскажу, как рассчитывается кредит, по какой формуле он считается, а также мы с Вами создадим кредитный калькулятор on-line на html и JavaScript. Вы можете использовать кредитный калькулятор на своих ресурсах, особенно если тематика Вашего бизнеса так или иначе связана с кредитованием.
Основные виды платежей по кредиту:
1. Дифференцированные платежи представляют собой ежемесячные выплаты по кредиту, которые к концу срока договора кредитования уменьшаются. Данные платежи состоят из определенной доли основного долга, а также процентов, которые начисляются на оставшуюся невыплаченную сумму кредита. Используются они зачастую в Сбербанке.
2. Аннуитетные платежи представляют собой равные по сумме ежемесячные платежи, состоящие из доли основного долга и суммы процентов, начисленных за пользование кредитом. Такие платежи довольно часто применяются в коммерческих банках.
Мой кредитный калькулятор основан на формуле расчёта именно Аннуитетных платежей. Кредитный калькулятор позволяет рассчитать сумму ежемесячных платежей, общую сумму платежей по кредиту, сумму переплаты по кредиту. Работает кредитный калькулятор без перезагрузки страницы.
Как рассчитываются аннуитетные платежи?
Аннуитетными платежами называют платежи, которые выплачиваются равными долями в течение всего кредитного периода, т.е. заемщик регулярно выплачивает платежи одинаковых размеров. Данная сумма меняется по согласованию обеих сторон, либо в случае досрочного погашения. Аннуитетный платеж также включает в себя две части:
1. Проценты, начисляемые за пользование кредитными средствами.
2. Сумма основного долга.
При уменьшении сроков кредитования начисляемые проценты снижаются, а сумма основного долга, наоборот, увеличивается. Поначалу основной долг убывает немного медленно. Общий размер всех процентов по долгу значительно больше, что сильно заметно при досрочном погашении кредита. Первые выплаты покрывают большую часть процентов по ссуде. Размеры аннуитетных платежей исчисляются по следующей формуле:
РАП – размер аннуитетного платежа, ПСК – первоначальная сумма кредита, ПГС – процентная годовая ставка, СК – срок кредита. Такую формулу можно назвать «классической», потому что она применяется во многих банках, электронных таблицах, кредитных калькуляторах.
Итак, давайте посмотрим, как будет выглядеть и работать наша форма кредитного калькулятора on-line без перезагрузки страницы.
Заполняем поля: сумма кредита, ставка % в год, период выплат – годы и месяцы.
После нажатия кнопки «Посчитать» программа выдаст итог расчёта.
Вот так, друзья, всё это будет выглядеть. Ну, а теперь, переходим к коду.
HTML-код формы кредитного калькулятора on-line будет выглядеть так:
Давайте приведём нашу форму кредитного калькулятора в «человеческий» вид, добавляем CSS-стили:
Информация из нашей формы кредитного калькулятора после нажатия на кнопку «Посчитать» передаётся в JavaScript обработчик, который размещается между тегами head на той же странице, что и html-код. Все необходимые вычисления кредитного калькулятора производятся в JavaScript коде.
Вот в принципе и всё, кредитный калькулятор on-line готов. Если у Вас есть навыки и опыт работы с JavaScript, Вы можете расширить возможности кредитного калькулятора, максимально адаптировав его под свои нужды.
Следующая статья на моём сайте выйдет также по программированию и будет посвящена созданию и установки капчи к форме обратной связи без перезагрузки страницы. Рекомендую подписаться на обновление моего сайта.
В рубрике «Мотивация – путь к успеху» сегодня такая картинка:
Скачать бесплатно!
Простой, но гибкий калькулятор для расчёта общей стоимости ипотеки
Хотите посчитать, во что на самом деле обойдётся вам квартира именно с вашим сложным графиком оплаты страховки, ремонтом и тем, что вы планируете платить коммуналку лишь несколько месяцев пока не сдадите квартиру жильцу?
Смело добавляйте колонки для типов платежей, которые хотите учитывать, меняйте цифры под ваши условия и получайте результат.
Зачем вообще нужен ещё один калькулятор ипотеки
Рано или поздно каждый взрослеющий человек приходит к тому, что хорошо бы не только тратить деньги на текущее потребление, но и откладывать на чёрный день, на ежегодный отпуск и на инвестиции в будущее. Покупка квартиры или дома — один из наиболее консервативных способов инвестирования, скорее даже способов сбережения. Помимо чисто финансовых аспектов, приобретение жилья даёт вам свободу обустраивать его так, как хочется, заводить любых домашних питомцев в рамках законодательства и вообще чувствовать себя спокойнее.
Конечно же, за подобное чувство спокойствия надо платить и, как пишут многие, очень часто покупка недвижимости именно в целях инвестирования проигрывает даже обычному банковскому вкладу, к тому же защищённому страхованием вкладов.
Как и многие айтишники перед серьёзным решением я предпочитаю строить разнообразные формулы, прикидывать плюсы минусы, сравнивать варианты инвестиций и, к сожалению, среди множества существующих калькуляторов мне так и не удалось найти достаточно простой, но в то же время гибкий, который позволил бы ответить на вопрос «а насколько же выгоднее/рискованнее снимать квартиру и вкладываться, например, в облигации, чем покупать недвижимость в ипотеку».
Пришлось проводить подобные расчёты самому, и первая часть расчётов получилась достаточно простой и легко настраиваемой. Буду рад, если поможет кому-нибудь ещё.
Что учитывает калькулятор и откуда данные
Все цифры в примере расчёта немного изменены на случай, если я не дочитал тонкостей соглашений о неразглашении, но примерно соответствуют покупке убитой квартиры в старом фонде Санкт-Петербурга в ипотеку через один синий банк.
Квартиру приобрели в феврале 2019 года с целью прежде всего сбережения денег. Добрые и опытные родственники обещали помочь с ремонтом, поэтому квартиру выбрали максимальной убитости, с планом выполнить ремонт как можно скорее, сразу же сдать квартиру и продолжать сдавать её почти всегда, вкладываясь в ремонт по минимуму.
Учтённые расходы
Сейчас пример калькулятора учитывает следующее
Что можно заметить по графику
Конечно же, при различных условиях выводы будут отличаться, в данном случае самые очевидные наблюдения таковы:
Что дальше
Полезен вам калькулятор? Пользовались бы сами или кинули бы ссылку товарищу? Что улучшить? На чём лучше сфокусироваться в дальнейшем: на расчёте доходной стороны, на учёте инфляции, на удобстве, на чём-то ещё?
Помогите улучшить калькулятор, ответив на пару вопросов.