Скрипты и советы | 5 марта 2026 82
js, HTML, готовый скрипт, идея
<!-- Кнопка запуска -->
<a href="#" class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#calculatorModal">
Запустить калькулятор
</a>
<!-- Модальное окно -->
<div class="modal fade" id="calculatorModal" tabindex="-1" aria-labelledby="calculatorModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="calculatorModalLabel">Калькулятор эффекта от доработок сайта</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Закрыть"></button>
</div>
<div class="modal-body">
<form id="effect-calc">
<div class="mb-3">
<label for="traffic" class="form-label">Посещаемость сайта (человек в день):</label>
<input type="number" class="form-control" id="traffic" value="50" min="1">
</div>
<div class="mb-3">
<label for="conversion-current" class="form-label">Текущая конверсия в целевое действие (%):</label>
<input type="number" class="form-control" id="conversion-current" value="1" min="0.1" step="0.1">
</div>
<div class="mb-3">
<label for="conversion-future" class="form-label">Планируемая конверсия после доработки (%):</label>
<input type="number" class="form-control" id="conversion-future" value="2" min="0.1" step="0.1">
</div>
<div class="mb-3">
<label for="avg-check" class="form-label">Средний чек (руб):</label>
<input type="number" class="form-control" id="avg-check" value="5000" min="100">
</div>
<div class="d-grid">
<button type="button" class="btn btn-primary" onclick="calculate()">Рассчитать прогноз</button>
</div>
</form>
<!-- Блок результатов -->
<div id="result" class="mt-4 p-3 bg-light border rounded-3 d-none">
<h6 class="border-bottom pb-2 mb-3">Результаты расчета (за 30 дней):</h6>
<div class="row g-2 mb-2">
<div class="col-7">Текущая выручка в месяц:</div>
<div class="col-5 text-end fw-bold"><span id="current-month">0</span> ₽</div>
</div>
<div class="row g-2 mb-2">
<div class="col-7">Выручка после улучшения:</div>
<div class="col-5 text-end fw-bold text-primary"><span id="future-month">0</span> ₽</div>
</div>
<hr class="my-3">
<div class="row g-2 mb-2">
<div class="col-7">Доп. прибыль в месяц:</div>
<div class="col-5 text-end fw-bold text-success"><span id="extra-month">0</span> ₽</div>
</div>
<div class="row g-2">
<div class="col-7">Доп. прибыль в год:</div>
<div class="col-5 text-end fw-bold text-success"><span id="extra-year">0</span> ₽</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Закрыть</button>
</div>
</div>
</div>
</div><script>
function calculate() {
// Получение и парсинг значений
const trafficInput = document.getElementById('traffic').value;
const convCurrentInput = document.getElementById('conversion-current').value;
const convFutureInput = document.getElementById('conversion-future').value;
const avgCheckInput = document.getElementById('avg-check').value;
// Простая валидация
if (!trafficInput || !convCurrentInput || !convFutureInput || !avgCheckInput) {
alert('Пожалуйста, заполните все поля корректными числами');
return;
}
const traffic = parseFloat(trafficInput);
const convCurrent = parseFloat(convCurrentInput) / 100;
const convFuture = parseFloat(convFutureInput) / 100;
const avgCheck = parseFloat(avgCheckInput);
const daysPerMonth = 30;
// Расчеты (исправлена математическая операция умножения)
const currentMonthly = traffic * convCurrent * avgCheck * daysPerMonth;
const futureMonthly = traffic * convFuture * avgCheck * daysPerMonth;
const extraMonthly = futureMonthly - currentMonthly;
const extraYearly = extraMonthly * 12;
// Функция форматирования валюты
const formatRub = (num) => {
return Math.round(num).toLocaleString('ru-RU');
};
// Вывод результатов
document.getElementById('current-month').innerText = formatRub(currentMonthly);
document.getElementById('future-month').innerText = formatRub(futureMonthly);
document.getElementById('extra-month').innerText = formatRub(extraMonthly);
document.getElementById('extra-year').innerText = formatRub(extraYearly);
// Показ блока с результатами
const resultBlock = document.getElementById('result');
resultBlock.classList.remove('d-none');
// Плавная прокрутка к результатам внутри модального окна (опционально)
resultBlock.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
}
</script>Веб-разработчик с 20-летним стажем, основатель веб-студии TCSE. Специализация: DLE «под ключ», Webasyst, Parts-Soft.ru, технический аудит.
Сайт есть, реклама и продвижение запущено, а заказов нет! В большинстве случае все просто: Нет стабильной системы...
ПодробнееПривет, хаброжители! Представьте: вы часами полируете мета‑теги, подбираете ключевые слова и анализируете конкурентов,...
ПодробнееЛет 15 назад я начал свой путь в сфере разработки сайтов и интернет-рекламы. Главным аргументом в переговорах с...
ПодробнееЯ не буду говорить про SEO, сделанное на нейрогенережке и вот почему. Да, такого сейчас много и становится только...
ПодробнееОльга Топал, Middle SEO specialist, Boosta SEO - это не так страшно, как кажется. А базовое SEO – еще проще. Правильная...
ПодробнееПока мы тут спорим о стратегиях, не забываем и про технологические «плюшки», которые позволяют не просто работать в...
Подробнее
💬 Комментарии
В связи с новыми требованиями законодательства РФ (ФЗ-152, ФЗ «О рекламе») и ужесточением контроля со стороны РКН, мы отключили систему комментариев на сайте.
🔒 Важно Теперь мы не собираем и не храним ваши персональные данные — даже если очень захотим.
💡 Хотите обсудить материал?
Присоединяйтесь к нашему Telegram-каналу:
https://t.me/tcsecms/Нажмите кнопку ниже — и вы сразу попадёте в чат с комментариями