Загрузка данных
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Калькулятор намокания под дождем</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f4f8;
color: #333;
margin: 0;
padding: 20px;
display: flex;
justify-content: center;
}
.container {
background-color: #fff;
padding: 30px;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
width: 100%;
max-width: 500px;
}
h1 {
font-size: 22px;
text-align: center;
margin-bottom: 25px;
color: #1e3a8a;
}
.param-group {
margin-bottom: 20px;
}
label {
display: flex;
justify-content: space-between;
font-weight: bold;
margin-bottom: 8px;
}
.unit {
font-weight: normal;
color: #666;
}
input[type="range"] {
width: 100%;
margin-top: 5px;
}
.result-box {
background-color: #e0f2fe;
border: 2px solid #7dd3fc;
padding: 20px;
border-radius: 8px;
text-align: center;
margin-top: 25px;
}
.wet-index {
font-size: 36px;
font-weight: bold;
color: #0369a1;
margin: 10px 0;
}
.verdict {
font-size: 14px;
color: #0c4a6e;
font-style: italic;
}
</style>
</head>
<body>
<div class="container">
<h1>Коэффициент намокания под дождем</h1>
<!-- Слайдер скорости человека -->
<div class="param-group">
<label>
Скорость человека:
<span class="unit" id="human-speed-val">5 км/ч (Шаг)</span>
</label>
<input type="range" id="human-speed" min="0" max="25" step="0.5" value="5">
</div>
<!-- Слайдер скорости ветра -->
<div class="param-group">
<label>
Скорость ветра (встречный/попутный):
<span class="unit" id="wind-speed-val">0 км/ч (Штиль)</span>
</label>
<input type="range" id="wind-speed" min="-20" max="20" step="0.5" value="0">
</div>
<!-- Слайдер плотности осадков -->
<div class="param-group">
<label>
Интенсивность дождя:
<span class="unit" id="rain-density-val">Умеренный</span>
</label>
<input type="range" id="rain-density" min="1" max="5" step="1" value="2">
</div>
<!-- Блок результатов -->
<div class="result-box">
<div>Ваш коэффициент намокания (в минуту):</div>
<div class="wet-index" id="wet-index">0</div>
<div class="verdict" id="verdict">Загрузка...</div>
</div>
</div>
<script>
const humanSpeedSlider = document.getElementById('human-speed');
const windSpeedSlider = document.getElementById('wind-speed');
const rainDensitySlider = document.getElementById('rain-density');
const humanSpeedVal = document.getElementById('human-speed-val');
const windSpeedVal = document.getElementById('wind-speed-val');
const rainDensityVal = document.getElementById('rain-density-val');
const wetIndexDisplay = document.getElementById('wet-index');
const verdictDisplay = document.getElementById('verdict');
function getRainLabel(val) {
switch(parseInt(val)) {
case 1: return "Морось";
case 2: return "Умеренный";
case 3: return "Сильный дождь";
case 4: return "Ливень";
case 5: return "Стена воды";
default: return "";
}
}
function updateCalculations() {
const vH = parseFloat(humanSpeedSlider.value); // Скорость человека км/ч
const vW = parseFloat(windSpeedSlider.value); // Скорость ветра км/ч (положительная - встречный)
const density = parseInt(rainDensitySlider.value); // Множитель плотности
// Текстовые подписи для слайдеров
let humanType = "Стоите";
if (vH > 0 && vH <= 6) humanType = "Шаг";
else if (vH > 6 && vH <= 12) humanType = "Быстрый шаг / Бег трусцой";
else if (vH > 12) humanType = "Спринт";
humanSpeedVal.textContent = `${vH} км/ч (${humanType})`;
let windType = "Штиль";
if (vW > 0) windType = "Встречный ветер";
if (vW < 0) windType = "Попутный ветер";
windSpeedVal.textContent = `${Math.abs(vW)} км/ч (${windType})`;
rainDensityVal.textContent = getRainLabel(density);
// --- Физическая модель расчета ---
// 1. Поток сверху (горизонтальная проекция человека: голова и плечи ~ 0.1 м²)
// Скорость падения капель примерно 25 км/ч. Этот поток стабилен во времени.
const topFlux = 0.1 * 25;
// 2. Поток сбоку/спереди (вертикальная проекция человека ~ 0.6 м²)
// Зависит от относительной горизонтальной скорости человека и ветра.
// Если ветер встречный (+), относительная скорость растет. Если попутный (-), падает.
const relativeHorizontalSpeed = Math.abs(vH + vW);
const frontFlux = 0.6 * relativeHorizontalSpeed;
// Итоговый объем капель в единицу времени, умноженный на коэффициент плотности дождя
let wetRate = (topFlux + frontFlux) * density * 0.4;
// Округляем для красоты
wetIndexDisplay.textContent = wetRate.toFixed(1);
// Вердикт и советы
let verdict = "";
if (vH === 0 && vW === 0) {
verdict = "Вы стоите на месте. Намокнет в основном голова. Лучше бегите в укрытие!";
} else if (vW < 0 && Math.abs(vH - Math.abs(vW)) < 1) {
verdict = "Идеально! Вы бежите со скоростью попутного ветра, дождь в лицо почти не попадает.";
} else if (vW > 10 && vH > 10) {
verdict = "Жесткие условия: бег навстречу ветру сильно увеличивает промокание спереди.";
} else if (vH > 15) {
verdict = "Вы бежите очень быстро. Вы промокнете быстрее в секунду, но доберетесь до цели за меньшее время!";
} else {
verdict = "Стандартное намокание. Старайтесь найти укрытие.";
}
verdictDisplay.textContent = verdict;
}
// Навешиваем обработчики событий на слайдеры
humanSpeedSlider.addEventListener('input', updateCalculations);
windSpeedSlider.addEventListener('input', updateCalculations);
rainDensitySlider.addEventListener('input', updateCalculations);
// Первичный расчет при загрузке
updateCalculations();
</script>
</body>
</html>