[html]<!DOCTYPE html>
<html>
<head>
<title>Ипотечный калькулятор</title>
<style>
.calculator {
max-width: 400px;
margin: 20px;
padding: 20px;
border: 1px solid #ccc;
border-radius: 10px;
font-family: Arial, sans-serif;
}
.input-group {
margin-bottom: 15px;
}
.input-group label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
.input-group input {
width: 100%;
padding: 8px;
box-sizing: border-box;
border: 1px solid #ddd;
border-radius: 4px;
}
.result {
margin-top: 20px;
padding: 15px;
background-color: #f0f8ff;
border: 1px solid #b0e0e6;
border-radius: 4px;
font-size: 1.1em;
}
button {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
width: 100%;
}
button:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<div class="calculator">
<h2>Расчет ипотеки</h2>
<div class="input-group">
<label>Сумма кредита (₽):</label>
<input type="number" id="loanAmount" value="3000000" min="100000" step="100000">
</div>
<div class="input-group">
<label>Процентная ставка (%):</label>
<input type="number" id="interestRate" value="7.5" min="1" max="20" step="0.1">
</div>
<div class="input-group">
<label>Срок кредита (лет):</label>
<input type="number" id="loanTerm" value="20" min="1" max="30">
</div>
<button onclick="calculateMortgage()">Рассчитать</button>
<div class="result" id="result">
<!-- Результат будет здесь -->
</div>
</div>
<script>
function calculateMortgage() {
// Получаем значения из полей ввода
const loanAmount = parseFloat(document.getElementById('loanAmount').value) || 0;
const interestRate = parseFloat(document.getElementById('interestRate').value) || 0;
const loanTermYears = parseInt(document.getElementById('loanTerm').value) || 0;
// Проверка ввода
if (loanAmount <= 0 || interestRate <= 0 || loanTermYears <= 0) {
document.getElementById('result').innerHTML = 'Пожалуйста, введите корректные данные';
return;
}
// Преобразуем процентную ставку в месячную и десятичную форму
const monthlyInterest = (interestRate / 100) / 12;
const loanTermMonths = loanTermYears * 12;
// Формула аннуитетного платежа
const payment = (loanAmount * monthlyInterest) /
(1 - Math.pow(1 + monthlyInterest, -loanTermMonths));
// Форматируем результат
const formattedPayment = payment.toLocaleString('ru-RU', {
style: 'currency',
currency: 'RUB',
minimumFractionDigits: 0
});
// Выводим результат
document.getElementById('result').innerHTML = `
Ежемесячный платеж: <strong>${formattedPayment}</strong><br>
Общая сумма выплат: <strong>${(payment * loanTermMonths).toLocaleString('ru-RU', {style: 'currency', currency: 'RUB'})}</strong><br>
Переплата: <strong>${((payment * loanTermMonths) - loanAmount).toLocaleString('ru-RU', {style: 'currency', currency: 'RUB'})}</strong>
`;
}
</script>
</body>
</html>[/html]