index.html - master - Hanami/proba

index.html
174 строки6 KB
Hanami
Create: index.html
22 июл 2026, 11:43
22 июл 2026, 11:432bf3337
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Конвертер систем счисления</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background-color: #f4f4f9;
            color: #333;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        
        .calculator {
            background: white;
            padding: 30px 40px;
            border-radius: 15px;
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
            width: 400px;
            text-align: center;
        }

        h1 {
            color: #2c3e50;
            margin-bottom: 20px;
            font-size: 24px;
        }

        input, select {
            width: 100%;
            padding: 12px;
            margin: 10px 0;
            border: 2px solid #ecf0f1;
            border-radius: 8px;
            font-size: 16px;
            transition: border-color 0.3s;
            box-sizing: border-box;
        }

        input:focus, select:focus {
            outline: none;
            border-color: #3498db;
        }

        button {
            width: 100%;
            padding: 15px;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 18px;
            cursor: pointer;
            transition: background-color 0.3s;
            margin-top: 10px;
        }

        button:hover {
            background-color: #2980b9;
        }

        #result {
            margin-top: 20px;
            padding: 15px;
            background-color: #eafaf1;
            border-left: 5px solid #2ecc71;
            border-radius: 8px;
            text-align: left;
            font-weight: bold;
            min-height: 40px;
            word-break: break-all;
        }

        .error {
            background-color: #fdedec !important;
            border-left-color: #e74c3c !important;
            color: #c0392b;
        }
    </style>
</head>
<body>

<div class="calculator">
    <h1>🧮 Калькулятор систем счисления</h1>
    
    <!-- Поле ввода числа -->
    <input type="text" id="numberInput" placeholder="Введите число (например, 1A или 1011)">
    
    <!-- Выбор исходной системы счисления -->
    <select id="fromBase">
        <option value="2">Двоичная (основание 2)</option>
        <option value="8">Восьмеричная (основание 8)</option>
        <option value="10" selected>Десятичная (основание 10)</option>
        <option value="16">Шестнадцатеричная (основание 16)</option>
    </select>

    <!-- Выбор целевой системы счисления -->
    <select id="toBase">
        <option value="2">Двоичная (основание 2)</option>
        <option value="8">Восьмеричная (основание 8)</option>
        <option value="10">Десятичная (основание 10)</option>
        <option value="16" selected>Шестнадцатеричная (основание 16)</option>
    </select>

    <button onclick="convert()">Перевести</button>
    
    <!-- Блок для вывода результата -->
    <div id="result"></div>
</div>

<script>
function convert() {
    // Получаем данные из полей страницы
    const numberStr = document.getElementById('numberInput').value.trim().toUpperCase();
    const fromBase = parseInt(document.getElementById('fromBase').value);
    const toBase = parseInt(document.getElementById('toBase').value);
    const resultDiv = document.getElementById('result');

    // Проверка на пустое поле
    if (!numberStr) {
        resultDiv.textContent = "Пожалуйста, введите число.";
        resultDiv.className = "error";
        return;
    }

    try {
        /* 
           ЭТАП 1: Перевод В десятичную систему.
           Метод parseInt(string, radix) встроен в JS. 
           Он берет строку и основание (radix), а возвращает обычное число.
           Это аналог функции int(number_str, base) в Python.
        */
        const decimalValue = parseInt(numberStr, fromBase);

        // Если parseInt вернул NaN (Not a Number), значит введены неверные цифры
        if (isNaN(decimalValue)) {
            throw new Error(`Цифра недопустима для системы ${fromBase}`);
        }
        
        /*
           ЭТАП 2: Перевод ИЗ десятичной системы в целевую.
           Метод toString(radix) делает обратное действие.
           Число превращается в строку в нужной системе счисления.
        */
        const convertedValue = decimalValue.toString(toBase).toUpperCase();

        // Красивое оформление ответа
        resultDiv.className = ""; // Убираем класс ошибки, если она была раньше
        resultDiv.innerHTML = `
            <strong>Результат:</strong><br>
            ${numberStr}<sub>${fromBase}</sub> = ${convertedValue}<sub>${toBase}</sub>
            <br><small>(в десятичной это ${decimalValue})</small>
        `;

    } catch (e) {
        // Обработка ошибок (например, ввели цифру 2 в двоичную систему)
        resultDiv.textContent = "Ошибка: " + e.message;
        resultDiv.className = "error";
    }
}

/* 
   ДОМАШНЕЕ ЗАДАНИЕ ДЛЯ УЧЕНИКОВ:
   Попробуйте изменить этот код так, чтобы он поддерживал основания до 36-й системы.
   Подсказка: Для этого понадобится строка со всеми буквами алфавита после F.
*/
</script>

</body>
</html>