jjjjjjjjay

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.

Вы здесь » jjjjjjjjay » Тестовый форум » Тестовое сообщение

Тестовое сообщение

Страница: 1

Сообщений 1 страница 8 из 8

1

  • Автор: пэрсик
  • пэрсик
  • Администратор
  • Сообщений: 19
  • валюта: 999
  • Уважение: +0
  • текст текст текст

    вариант расположения

Благодарим за выбор нашего сервиса!

0

2

  • Автор: пэрсик
  • пэрсик
  • Администратор
  • Сообщений: 19
  • валюта: 999
  • Уважение: +0
  • текст текст текст

    вариант расположения

[html]<!-- Контейнер калькулятора -->
<div id="calculator-container">
    <div class="price-item" data-price="1000">
        Позиция 1 - 1000 ₽
        <input type="number" class="quantity" value="1" min="1" max="10">
        <button class="toggle-btn">Добавить</button>
    </div>
    <div class="price-item" data-price="1500">
        Позиция 2 - 1500 ₽
        <input type="number" class="quantity" value="1" min="1" max="10">
        <button class="toggle-btn">Добавить</button>
    </div>
    <div class="price-item" data-price="2000">
        Позиция 3 - 2000 ₽
        <input type="number" class="quantity" value="1" min="1" max="10">
        <button class="toggle-btn">Добавить</button>
    </div>
    <div class="price-item" data-price="1200">
        Позиция 4 - 1200 ₽
        <input type="number" class="quantity" value="1" min="1" max="10">
        <button class="toggle-btn">Добавить</button>
    </div>
    <div class="price-item" data-price="450">
        Позиция 5 - 450 ₽
        <input type="number" class="quantity" value="1" min="1" max="10">
        <button class="toggle-btn">Добавить</button>
    </div>

    <div class="total">
        Итоговая сумма: <span id="total-price">0 ₽</span>
        <br>
        Состав расчёта: <span id="breakdown">0 ₽</span>
    </div>
</div>

<script>
    // Изначальная сумма
    let totalAmount = 0;

    // Объект для хранения количества добавленных позиций
    let breakdown = {};

    // Находим все элементы с ценами
    const priceItems = document.querySelectorAll('.price-item');
   
    // Элементы для итоговой суммы и breakdown
    const totalPriceElement = document.getElementById('total-price');
    const breakdownElement = document.getElementById('breakdown');

    // Обработчик клика по каждой позиции
    priceItems.forEach(item => {
        const price = parseInt(item.getAttribute('data-price'));
        const button = item.querySelector('.toggle-btn'); // Кнопка для добавления
        const quantityInput = item.querySelector('.quantity'); // Поле для ввода количества

        button.addEventListener('click', () => {
            // Получаем количество выбранных позиций
            const quantity = parseInt(quantityInput.value);

            // Добавляем цену в расчёт нужное количество раз
            totalAmount += price * quantity;

            // Обновляем или добавляем количество для данной позиции в breakdown
            if (breakdown[price]) {
                breakdown[price] += quantity;
            } else {
                breakdown[price] = quantity;
            }

            // Формируем строку для отображения состава расчёта с умножением
            const breakdownText = Object.keys(breakdown).map(price => {
                const quantity = breakdown[price];
                return quantity > 1 ? `${price} × ${quantity}` : `${price}`;
            }).join(' + ');

            // Обновляем текст итоговой суммы
            totalPriceElement.textContent = totalAmount + ' ₽';

            // Обновляем текст состава расчёта
            breakdownElement.textContent = breakdownText + ' = ' + totalAmount + ' ₽';
        });
    });
</script>

<style>
    #calculator-container {
        font-family: Arial, sans-serif;
        text-align: center;
        margin: 20px;
    }

    .price-item {
        margin: 10px 0;
        padding: 10px;
        background-color: #f0f0f0;
        cursor: pointer;
        font-size: 18px;
        border-radius: 5px;
        transition: background-color 0.3s;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .price-item:hover {
        background-color: #d0d0d0;
    }

    .toggle-btn {
        background-color: #4CAF50;
        color: white;
        border: none;
        padding: 5px 10px;
        cursor: pointer;
        font-size: 14px;
        border-radius: 5px;
    }

    .toggle-btn:hover {
        background-color: #45a049;
    }

    .quantity {
        width: 50px;
        font-size: 14px;
        padding: 5px;
        margin-left: 10px;
        border-radius: 5px;
border: 1px solid #ccc;
    }

    .total {
        margin-top: 20px;
        font-size: 24px;
        font-weight: bold;
    }
</style>

[/html]

0

3

  • Автор: пэрсик
  • пэрсик
  • Администратор
  • Сообщений: 19
  • валюта: 999
  • Уважение: +0
  • текст текст текст

    вариант расположения

[html]<style>
        #calculator-container {
            font-family: Arial, sans-serif;
            text-align: center;
            margin: 20px;
        }

        table {
            width: 100%;
            margin-bottom: 20px;
            border-collapse: collapse;
        }

        table th, table td {
            padding: 10px;
            border: 1px solid #ccc;
            text-align: center;
        }

        table th {
            background-color: #f0f0f0;
        }

        .price-item {
            font-size: 14px; /* Уменьшили шрифт для таблицы */
        }

        .toggle-btn {
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 5px 10px;
            cursor: pointer;
            font-size: 14px;
            border-radius: 5px;
        }

        .toggle-btn:hover {
            background-color: #45a049;
        }

        .quantity {
            width: 50px;
            font-size: 14px;
            padding: 5px;
            margin-left: 10px;
            border-radius: 5px;
            border: 1px solid #ccc;
        }

        #subtraction-container {
            margin-top: 30px;
        }

        #base-amount {
            font-size: 16px;
            padding: 5px;
            width: 150px;
        }

        .total {
            margin-top: 20px;
            font-size: 24px;
            font-weight: bold;
        }

        #subtraction-items {
            margin-top: 15px;
            font-size: 14px;
        }
    </style>
</head>
<body>

<!-- Контейнер калькулятора -->
<div id="calculator-container">
    <!-- Таблица для 36 позиций -->
    <table id="price-table">
        <thead>
            <tr>
                <th>Позиция</th>
                <th>Цена</th>
                <th>Количество</th>
                <th>Добавить</th>
            </tr>
        </thead>
        <tbody>
            <!-- Пример 36 позиций -->
            <tr class="price-item" data-price="1000">
                <td>Позиция 1</td>
                <td>1000 ₽</td>
                <td><input type="number" class="quantity" value="1" min="1" max="10"></td>
                <td><button class="toggle-btn">Добавить</button></td>
            </tr>
            <tr class="price-item" data-price="1500">
                <td>Позиция 2</td>
                <td>1500 ₽</td>
                <td><input type="number" class="quantity" value="1" min="1" max="10"></td>
                <td><button class="toggle-btn">Добавить</button></td>
            </tr>
            <!-- ... Еще 34 позиции, аналогичные -->
        </tbody>
    </table>

    <!-- Блок для вычитания -->
    <div id="subtraction-container">
        <label for="base-amount">Введите свою сумму:</label>
        <input type="number" id="base-amount" placeholder="Введите сумму для вычитания" value="0">
       
        <div id="subtraction-items">
            <h3>Выберите позиции для вычитания:</h3>
            <!-- Здесь будет список позиций для вычитания -->
        </div>

        <div class="total">
            Итоговая сумма: <span id="total-price">0 ₽</span>
            <br>
            Состав расчёта: <span id="breakdown">0 ₽</span>
        </div>
    </div>
</div>

<script>
    // Изначальная сумма
    let totalAmount = 0;
    let subtractionAmount = 0;

    // Объект для хранения количества добавленных позиций
    let breakdown = {};

    // Находим все элементы с ценами
    const priceItems = document.querySelectorAll('.price-item');

    // Элементы для итоговой суммы и breakdown
    const totalPriceElement = document.getElementById('total-price');
    const breakdownElement = document.getElementById('breakdown');

    // Для вычитания
    const baseAmountInput = document.getElementById('base-amount');
    const subtractionItemsContainer = document.getElementById('subtraction-items');

    // Обработчик клика по каждой позиции
    priceItems.forEach(item => {
        const price = parseInt(item.getAttribute('data-price'));
        const button = item.querySelector('.toggle-btn');
        const quantityInput = item.querySelector('.quantity');

        button.addEventListener('click', () => {
            // Получаем количество выбранных позиций
            const quantity = parseInt(quantityInput.value);

            // Добавляем цену в расчёт нужное количество раз
            totalAmount += price * quantity;

            // Обновляем или добавляем количество для данной позиции в breakdown
            if (breakdown[price]) {
                breakdown[price] += quantity;
            } else {
                breakdown[price] = quantity;
            }

            // Формируем строку для отображения состава расчёта с умножением
            const breakdownText = Object.keys(breakdown).map(price => {
                const quantity = breakdown[price];
                return quantity > 1 ? `${price} × ${quantity}` : `${price}`;
            }).join(' + ');

            // Обновляем текст итоговой суммы
            totalPriceElement.textContent = totalAmount + ' ₽';

            // Обновляем текст состава расчёта
            breakdownElement.textContent = breakdownText + ' = ' + totalAmount + ' ₽';
        });
    });

    // Функция для добавления элементов для вычитания
    function addSubtractionItem(price) {
        const div = document.createElement('div');
        div.innerHTML = `
            <input type="checkbox" class="subtract-checkbox" data-price="${price}">
            <span>Позиция на вычитание: ${price} ₽</span>
        `;
        subtractionItemsContainer.appendChild(div);
    }

    // Добавляем 9 позиций для вычитания (пример)
    const subtractPrices = [1000, 1500, 2000, 1200, 450, 800, 700, 600, 1300];
    subtractPrices.forEach(price => {
        addSubtractionItem(price);
    });

    // Обработчик для вычитания из введенной суммы
    baseAmountInput.addEventListener('input', () => {
        let baseAmount = parseInt(baseAmountInput.value);

        // Считаем, какие чекбоксы выбраны для вычитания
        const subtractCheckboxes = document.querySelectorAll('.subtract-checkbox:checked');
        subtractCheckboxes.forEach(checkbox => {
            const price = parseInt(checkbox.getAttribute('data-price'));
            baseAmount -= price;
        });

        // Обновляем сумму после вычитания
        subtractionAmount = baseAmount;
        totalPriceElement.textContent = subtractionAmount + ' ₽';
    });
</script>[/html]

0

4

  • Автор: пэрсик
  • пэрсик
  • Администратор
  • Сообщений: 19
  • валюта: 999
  • Уважение: +0
  • текст текст текст

    вариант расположения

[html]     <style>
        #calculator-container {
            font-family: Arial, sans-serif;
            text-align: center;
            margin: 20px;
        }

        table {
            width: 100%;
            margin-bottom: 20px;
            border-collapse: collapse;
        }

        table th, table td {
            padding: 10px;
            border: 1px solid #ccc;
            text-align: center;
        }

        table th {
            background-color: #f0f0f0;
        }

        .price-item {
            font-size: 14px; /* Уменьшили шрифт для таблицы */
        }

        .toggle-btn, .remove-btn {
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 5px 10px;
            cursor: pointer;
            font-size: 14px;
            border-radius: 5px;
            margin-right: 5px;
        }

        .toggle-btn:hover, .remove-btn:hover {
            background-color: #45a049;
        }

        .quantity {
            width: 50px;
            font-size: 14px;
            padding: 5px;
            margin-left: 10px;
            border-radius: 5px;
            border: 1px solid #ccc;
        }

        #subtraction-container {
            margin-top: 30px;
        }

        #base-amount {
            font-size: 16px;
            padding: 5px;
            width: 150px;
        }

        .total {
            margin-top: 20px;
            font-size: 24px;
            font-weight: bold;
        }

        #reset-btn {
            background-color: #f44336;
            color: white;
            padding: 10px 20px;
            border: none;
            cursor: pointer;
            font-size: 16px;
            border-radius: 5px;
            margin-top: 20px;
        }

        #reset-btn:hover {
            background-color: #e53935;
        }
    </style>
</head>
<body>

<!-- Контейнер калькулятора -->
<div id="calculator-container">
    <!-- Таблица для 36 позиций для сложения -->
    <h2>Позиции для добавления</h2>
    <table id="price-table">
        <thead>
            <tr>
                <th>Позиция</th>
                <th>Цена</th>
                <th>Количество</th>
                <th>Добавить</th>
                <th>Удалить количество</th>
            </tr>
        </thead>
        <tbody>
            <!-- Пример 36 позиций -->
            <tr class="price-item" data-price="1000">
                <td>Позиция 1</td>
                <td>1000 ₽</td>
                <td><input type="number" class="quantity" value="1" min="1" max="10"></td>
                <td><button class="toggle-btn">Добавить</button></td>
                <td><button class="remove-btn">Удалить количество</button></td>
            </tr>
            <tr class="price-item" data-price="1500">
                <td>Позиция 2</td>
                <td>1500 ₽</td>
                <td><input type="number" class="quantity" value="1" min="1" max="10"></td>
                <td><button class="toggle-btn">Добавить</button></td>
                <td><button class="remove-btn">Удалить количество</button></td>
            </tr>
            <!-- ... Еще 34 позиции -->
        </tbody>
    </table>

    <!-- Таблица для 36 позиций для вычитания -->
    <h2>Позиции для вычитания</h2>
    <table id="subtraction-table">
        <thead>
            <tr>
                <th>Позиция</th>
                <th>Цена</th>
                <th>Количество</th>
                <th>Добавить</th>
                <th>Удалить количество</th>
            </tr>
        </thead>
        <tbody>
            <!-- Пример 36 позиций для вычитания -->
            <tr class="price-item" data-price="1000">
                <td>Позиция 1</td>
                <td>1000 ₽</td>
                <td><input type="number" class="quantity" value="1" min="1" max="10"></td>
                <td><button class="toggle-btn">Добавить</button></td>
                <td><button class="remove-btn">Удалить количество</button></td>
            </tr>
            <tr class="price-item" data-price="1500">
                <td>Позиция 2</td>
                <td>1500 ₽</td>
                <td><input type="number" class="quantity" value="1" min="1" max="10"></td>
                <td><button class="toggle-btn">Добавить</button></td>
                <td><button class="remove-btn">Удалить количество</button></td>
            </tr>
            <!-- ... Еще 34 позиции для вычитания -->
        </tbody>
    </table>

    <!-- Поле для ввода своей суммы -->
    <div id="subtraction-container">
        <label for="base-amount">Введите свою сумму:</label>
        <input type="number" id="base-amount" placeholder="Введите сумму для расчёта" value="0">
        
        <div class="total">
            Итоговая сумма: <span id="total-price">0 ₽</span>
            <br>
            Состав расчёта: <span id="breakdown">0 ₽</span>
        </div>
    </div>

    <!-- Кнопка сброса всех расчетов -->
    <button id="reset-btn">Сбросить все расчеты</button>
</div>

<script>
    // Изначальная сумма
    let totalAmount = 0;
    let subtractionAmount = 0;
    let baseAmount = 0; // Сумма, введенная пользователем

    // Объект для хранения количества добавленных позиций
    let breakdown = {};

    // Элементы для итоговой суммы и breakdown
    const totalPriceElement = document.getElementById('total-price');
    const breakdownElement = document.getElementById('breakdown');

    // Для ввода своей суммы
    const baseAmountInput = document.getElementById('base-amount');

    // Получаем все позиции для сложения и вычитания
    const priceItems = document.querySelectorAll('.price-item'); // Для добавления
    const subtractionItems = document.querySelectorAll('.price-item'); // Для вычитания

    // Обработчик клика по каждой позиции (добавить для сложения)
    priceItems.forEach(item => {
        const price = parseInt(item.getAttribute('data-price'));
        const buttonAdd = item.querySelector('.toggle-btn');
        const quantityInput = item.querySelector('.quantity');
        const buttonRemove = item.querySelector('.remove-btn');

        // Добавить позицию для сложения
        buttonAdd.addEventListener('click', () => {
            const quantity = parseInt(quantityInput.value);
            totalAmount += price * quantity;

            // Обновляем или добавляем количество для данной позиции в breakdown
            if (breakdown[price]) {
                breakdown[price] += quantity;
            } else {
                breakdown[price] = quantity;
            }

            updateBreakdown();
        });

        // Удалить количество для сложения
        buttonRemove.addEventListener('click', () => {
            const quantity = parseInt(quantityInput.value);
            // Уменьшаем итоговую сумму на цену выбранного количества
            if (totalAmount - price * quantity >= 0) {
                totalAmount -= price * quantity;

                // Корректируем breakdown для этой позиции
                if (breakdown[price]) {
                    breakdown[price] -= quantity;
                    if (breakdown[price] <= 0) {
                        delete breakdown[price];
                    }
                }

                updateBreakdown();
            }
        });
    });

    // Обработчик клика по каждой позиции (добавить для вычитания)
    subtractionItems.forEach(item => {
        const price = parseInt(item.getAttribute('data-price'));
        const buttonAdd = item.querySelector('.toggle-btn');
        const quantityInput = item.querySelector('.quantity');
        const buttonRemove = item.querySelector('.remove-btn');

        // Добавить позицию для вычитания
        buttonAdd.addEventListener('click', () => {
            const quantity = parseInt(quantityInput.value);
            subtractionAmount -= price * quantity;

            // Если сумма уходит в минус, установим 0
            if (subtractionAmount < 0) {
                subtractionAmount = 0;
            }

            updateBreakdown();
        });

        // Удалить количество для вычитания
        buttonRemove.addEventListener('click', () => {
            const quantity = parseInt(quantityInput.value);
            subtractionAmount += price * quantity;

            updateBreakdown();
        });
    });

    // Обработчик для поля "Введите свою сумму"
    baseAmountInput.addEventListener('input', () => {
        baseAmount = parseInt(baseAmountInput.value);
        if (isNaN(baseAmount)) baseAmount = 0;

        updateBreakdown();
    });

    // Функция для обновления состава расчёта
    function updateBreakdown() {
        const totalSum = baseAmount + totalAmount + subtractionAmount;
        totalPriceElement.textContent = totalSum + ' ₽';

        const breakdownText = Object.keys(breakdown).map(price => {
            const quantity = breakdown[price];
            return quantity > 1 ? `${price} × ${quantity}` : `${price}`;
        }).join(' + ');

        breakdownElement.textContent = breakdownText + ' = ' + totalSum + ' ₽';
    }

    // Кнопка сброса всех расчетов
    document.getElementById('reset-btn').addEventListener('click', () => {
        totalAmount = 0;
        subtractionAmount = 0;
        baseAmount = 0;
        breakdown = {};
        baseAmountInput.value = 0;

        // Обновим отображение
        updateBreakdown();

        // Сбросим все поля ввода
        document.querySelectorAll('.quantity').forEach(input => input.value = 1);
    });
</script>

[/html]

0

5

  • Автор: пэрсик
  • пэрсик
  • Администратор
  • Сообщений: 19
  • валюта: 999
  • Уважение: +0
  • текст текст текст

    вариант расположения

[html]
    <style>
        #calculator-container {
            font-family: Arial, sans-serif;
            text-align: center;
            margin: 20px;
        }

        table {
            width: 100%;
            margin-bottom: 20px;
            border-collapse: collapse;
        }

        table th, table td {
            padding: 10px;
            border: 1px solid #ccc;
            text-align: center;
        }

        table th {
            background-color: #f0f0f0;
        }

        .price-item {
            font-size: 14px; /* Уменьшили шрифт для таблицы */
        }

        .toggle-btn, .remove-btn {
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 5px 10px;
            cursor: pointer;
            font-size: 14px;
            border-radius: 5px;
            margin-right: 5px;
        }

        .toggle-btn:hover, .remove-btn:hover {
            background-color: #45a049;
        }

        .quantity {
            width: 50px;
            font-size: 14px;
            padding: 5px;
            margin-left: 10px;
            border-radius: 5px;
            border: 1px solid #ccc;
        }

        #subtraction-container {
            margin-top: 30px;
        }

        #base-amount {
            font-size: 16px;
            padding: 5px;
            width: 150px;
        }

        .total {
            margin-top: 20px;
            font-size: 24px;
            font-weight: bold;
        }

        #reset-btn {
            background-color: #f44336;
            color: white;
            padding: 10px 20px;
            border: none;
            cursor: pointer;
            font-size: 16px;
            border-radius: 5px;
            margin-top: 20px;
        }

        #reset-btn:hover {
            background-color: #e53935;
        }
    </style>
</head>
<body>

<div id="calculator-container">
    <h2>Позиции для добавления</h2>
    <table id="price-table">
        <thead>
            <tr>
                <th>Позиция</th>
                <th>Цена</th>
                <th>Количество</th>
                <th>Добавить</th>
                <th>Удалить количество</th>
            </tr>
        </thead>
        <tbody>
            <tr class="price-item" data-price="1000">
                <td>Позиция 1</td>
                <td>1000 ₽</td>
                <td><input type="number" class="quantity" value="1" min="1" max="10"></td>
                <td><button class="toggle-btn">Добавить</button></td>
                <td><button class="remove-btn">Удалить количество</button></td>
            </tr>
            <tr class="price-item" data-price="1500">
                <td>Позиция 2</td>
                <td>1500 ₽</td>
                <td><input type="number" class="quantity" value="1" min="1" max="10"></td>
                <td><button class="toggle-btn">Добавить</button></td>
                <td><button class="remove-btn">Удалить количество</button></td>
            </tr>
        </tbody>
    </table>

    <h2>Позиции для вычитания</h2>
    <table id="subtraction-table">
        <thead>
            <tr>
                <th>Позиция</th>
                <th>Цена</th>
                <th>Количество</th>
                <th>Добавить</th>
                <th>Удалить количество</th>
            </tr>
        </thead>
        <tbody>
            <tr class="price-item" data-price="1000">
                <td>Позиция 1</td>
                <td>1000 ₽</td>
                <td><input type="number" class="quantity" value="1" min="1" max="10"></td>
                <td><button class="toggle-btn">Добавить</button></td>
                <td><button class="remove-btn">Удалить количество</button></td>
            </tr>
            <tr class="price-item" data-price="1500">
                <td>Позиция 2</td>
                <td>1500 ₽</td>
                <td><input type="number" class="quantity" value="1" min="1" max="10"></td>
                <td><button class="toggle-btn">Добавить</button></td>
                <td><button class="remove-btn">Удалить количество</button></td>
            </tr>
        </tbody>
    </table>

    <div id="subtraction-container">
        <label for="base-amount">Введите свою сумму:</label>
        <input type="number" id="base-amount" placeholder="Введите сумму для расчёта" value="0">

        <div class="total">
            Итоговая сумма: <span id="total-price">0 ₽</span>
            <br>
            Состав расчёта: <span id="breakdown">0 ₽</span>
        </div>
    </div>

    <button id="reset-btn">Сбросить все расчеты</button>
</div>

<script>
    let totalAmount = 0;
    let baseAmount = 0;
    let breakdown = {};

    const totalPriceElement = document.getElementById('total-price');
    const breakdownElement = document.getElementById('breakdown');
    const baseAmountInput = document.getElementById('base-amount');

    function handleTable(tableId, operation) {
        const table = document.getElementById(tableId);
        const items = table.querySelectorAll('.price-item');

        items.forEach((item) => {
            const price = parseInt(item.getAttribute('data-price'));
            const buttonAdd = item.querySelector('.toggle-btn');
            const quantityInput = item.querySelector('.quantity');
            const buttonRemove = item.querySelector('.remove-btn');

            buttonAdd.addEventListener('click', () => {
                const quantity = parseInt(quantityInput.value);
                const adjustment = price * quantity;

                if (operation === "add") totalAmount += adjustment;
                else totalAmount -= adjustment;

                if (breakdown[price]) {
                    breakdown[price] += operation === "add" ? quantity : -quantity;
                    if (breakdown[price] <= 0) delete breakdown[price];
                } else if (operation === "add") breakdown[price] = quantity;

                updateBreakdown();
            });

            buttonRemove.addEventListener('click', () => {
                const quantity = parseInt(quantityInput.value);
                const adjustment = price * quantity;

                if (operation === "add") totalAmount -= adjustment;
                else totalAmount += adjustment;

                if (breakdown[price]) {
                    breakdown[price] -= operation === "add" ? quantity : -quantity;
                    if (breakdown[price] <= 0) delete breakdown[price];
                }

                updateBreakdown();
            });
        });
    }

    function updateBreakdown() {
        const totalSum = baseAmount + totalAmount;
        totalPriceElement.textContent = totalSum + ' ₽';

        const breakdownText = Object.keys(breakdown).map((price) => {
            const quantity = breakdown[price];
            return quantity > 1 ? `${price} × ${quantity}` : `${price}`;
        }).join(' + ');

        breakdownElement.textContent = breakdownText + ' = ' + totalSum + ' ₽';
    }

    baseAmountInput.addEventListener('input', () => {
        baseAmount = parseInt(baseAmountInput.value);
        if (isNaN(baseAmount)) baseAmount = 0;
        updateBreakdown();
    });

    document.getElementById('reset-btn').addEventListener('click', () => {
        totalAmount = 0;
        baseAmount = 0;
        breakdown = {};
        baseAmountInput.value = 0;
        updateBreakdown();
        document.querySelectorAll('.quantity').forEach((input) => (input.value = 1));
    });

    handleTable("price-table", "add");
    handleTable("subtraction-table", "subtract");
</script>

[/html]

0

6

  • Автор: пэрсик
  • пэрсик
  • Администратор
  • Сообщений: 19
  • валюта: 999
  • Уважение: +0
  • текст текст текст

    вариант расположения

[html]
    <style>
        /* Стили остались без изменений */
        #calculator-container {
            font-family: Arial, sans-serif;
            text-align: center;
            margin: 20px;
        }

        table {
            width: 100%;
            margin-bottom: 20px;
            border-collapse: collapse;
        }

        table th, table td {
            padding: 10px;
            border: 1px solid #ccc;
            text-align: center;
        }

        table th {
            background-color: #f0f0f0;
        }

        .price-item {
            font-size: 14px;
        }

        .toggle-btn, .remove-btn {
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 5px 10px;
            cursor: pointer;
            font-size: 14px;
            border-radius: 5px;
            margin-right: 5px;
        }

        .toggle-btn:hover, .remove-btn:hover {
            background-color: #45a049;
        }

        .quantity {
            width: 50px;
            font-size: 14px;
            padding: 5px;
            margin-left: 10px;
            border-radius: 5px;
            border: 1px solid #ccc;
        }

        #subtraction-container {
            margin-top: 30px;
        }

        #base-amount {
            font-size: 16px;
            padding: 5px;
            width: 150px;
        }

        .total {
            margin-top: 20px;
            font-size: 24px;
            font-weight: bold;
        }

        #reset-btn {
            background-color: #f44336;
            color: white;
            padding: 10px 20px;
            border: none;
            cursor: pointer;
            font-size: 16px;
            border-radius: 5px;
            margin-top: 20px;
        }

        #reset-btn:hover {
            background-color: #e53935;
        }
    </style>
</head>
<body>

<div id="calculator-container">
    <h2>Позиции для добавления</h2>
    <table id="price-table">
        <thead>
            <tr>
                <th>Позиция</th>
                <th>Цена</th>
                <th>Количество</th>
                <th>Добавить</th>
                <th>Удалить количество</th>
            </tr>
        </thead>
        <tbody>
            <tr class="price-item" data-price="1000">
                <td>Позиция 1</td>
                <td>1000 ₽</td>
                <td><input type="number" class="quantity" value="1" min="1" max="10"></td>
                <td><button class="toggle-btn">Добавить</button></td>
                <td><button class="remove-btn">Удалить количество</button></td>
            </tr>
            <tr class="price-item" data-price="1500">
                <td>Позиция 2</td>
                <td>1500 ₽</td>
                <td><input type="number" class="quantity" value="1" min="1" max="10"></td>
                <td><button class="toggle-btn">Добавить</button></td>
                <td><button class="remove-btn">Удалить количество</button></td>
            </tr>
        </tbody>
    </table>

    <h2>Позиции для вычитания</h2>
    <table id="subtraction-table">
        <thead>
            <tr>
                <th>Позиция</th>
                <th>Цена</th>
                <th>Количество</th>
                <th>Добавить</th>
                <th>Удалить количество</th>
            </tr>
        </thead>
        <tbody>
            <tr class="price-item" data-price="1000">
                <td>Позиция 1</td>
                <td>1000 ₽</td>
                <td><input type="number" class="quantity" value="1" min="1" max="10"></td>
                <td><button class="toggle-btn">Добавить</button></td>
                <td><button class="remove-btn">Удалить количество</button></td>
            </tr>
            <tr class="price-item" data-price="1500">
                <td>Позиция 2</td>
                <td>1500 ₽</td>
                <td><input type="number" class="quantity" value="1" min="1" max="10"></td>
                <td><button class="toggle-btn">Добавить</button></td>
                <td><button class="remove-btn">Удалить количество</button></td>
            </tr>
        </tbody>
    </table>

    <div id="subtraction-container">
        <label for="base-amount">Введите свою сумму:</label>
        <input type="number" id="base-amount" placeholder="Введите сумму для расчёта" value="0">

        <div class="total">
            Итоговая сумма: <span id="total-price">0 ₽</span>
            <br>
            Состав расчёта: <span id="breakdown">0 ₽</span>
        </div>
    </div>

    <button id="reset-btn">Сбросить все расчеты</button>
</div>

<script>
    let totalAmount = 0;
    let baseAmount = 0;
    let breakdown = {};

    const totalPriceElement = document.getElementById('total-price');
    const breakdownElement = document.getElementById('breakdown');
    const baseAmountInput = document.getElementById('base-amount');

    function handleTable(tableId, operation) {
        const table = document.getElementById(tableId);
        const items = table.querySelectorAll('.price-item');

        items.forEach((item) => {
            const price = parseInt(item.getAttribute('data-price'));
            const buttonAdd = item.querySelector('.toggle-btn');
            const quantityInput = item.querySelector('.quantity');
            const buttonRemove = item.querySelector('.remove-btn');

            buttonAdd.addEventListener('click', () => {
                const quantity = parseInt(quantityInput.value);
                const adjustment = price * quantity;

                if (operation === "add") totalAmount += adjustment;
                else totalAmount -= adjustment;

                if (breakdown[price]) {
                    breakdown[price] += operation === "add" ? quantity : -quantity;
                    if (breakdown[price] <= 0) delete breakdown[price];
                } else if (operation === "add") breakdown[price] = quantity;

                updateBreakdown();
            });

            buttonRemove.addEventListener('click', () => {
                const quantity = parseInt(quantityInput.value);
                const adjustment = price * quantity;

                if (operation === "add") totalAmount -= adjustment;
                else totalAmount += adjustment;

                if (breakdown[price]) {
                    breakdown[price] -= operation === "add" ? quantity : -quantity;
                    if (breakdown[price] <= 0) delete breakdown[price];
                }

                updateBreakdown();
            });
        });
    }

    function updateBreakdown() {
        const totalSum = baseAmount + totalAmount;
        totalPriceElement.textContent = totalSum + ' ₽';

        const breakdownText = Object.keys(breakdown).map((price) => {
            const quantity = breakdown[price];
            return quantity > 1 ? `${price} × ${quantity}` : `${price}`;
        });

        if (baseAmount > 0) {
            breakdownText.unshift(`Сумма: ${baseAmount}`);
        }

        breakdownElement.textContent = breakdownText.join(' + ') + ' = ' + totalSum + ' ₽';
    }

    baseAmountInput.addEventListener('input', () => {
        baseAmount = parseInt(baseAmountInput.value);
        if (isNaN(baseAmount)) baseAmount = 0;
        updateBreakdown();
    });

    document.getElementById('reset-btn').addEventListener('click', () => {
        totalAmount = 0;
        baseAmount = 0;
        breakdown = {};
        baseAmountInput.value = 0;
        updateBreakdown();
        document.querySelectorAll('.quantity').forEach((input) => (input.value = 1));
    });

    handleTable("price-table", "add");
    handleTable("subtraction-table", "subtract");
</script>

[/html]

0

7

  • Автор: пэрсик
  • пэрсик
  • Администратор
  • Сообщений: 19
  • валюта: 999
  • Уважение: +0
  • текст текст текст

    вариант расположения

[html]
    <style>
        /* Стили остались без изменений */
        #calculator-container {
            font-family: Arial, sans-serif;
            text-align: center;
            margin: 20px;
        }

        table {
            width: 100%;
            margin-bottom: 20px;
            border-collapse: collapse;
        }

        table th, table td {
            padding: 10px;
            border: 1px solid #ccc;
            text-align: center;
        }

        table th {
            background-color: #f0f0f0;
        }

        .price-item {
            font-size: 14px;
        }

        .toggle-btn, .remove-btn {
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 5px 10px;
            cursor: pointer;
            font-size: 14px;
            border-radius: 5px;
            margin-right: 5px;
        }

        .toggle-btn:hover, .remove-btn:hover {
            background-color: #45a049;
        }

        .quantity {
            width: 50px;
            font-size: 14px;
            padding: 5px;
            margin-left: 10px;
            border-radius: 5px;
            border: 1px solid #ccc;
        }

        #subtraction-container {
            margin-top: 30px;
        }

        #base-amount {
            font-size: 16px;
            padding: 5px;
            width: 150px;
        }

        .total {
            margin-top: 20px;
            font-size: 24px;
            font-weight: bold;
        }

        #reset-btn {
            background-color: #f44336;
            color: white;
            padding: 10px 20px;
            border: none;
            cursor: pointer;
            font-size: 16px;
            border-radius: 5px;
            margin-top: 20px;
        }

        #reset-btn:hover {
            background-color: #e53935;
        }
    </style>
</head>
<body>

<div id="calculator-container">
    <h2>Позиции для добавления</h2>
    <table id="price-table">
        <thead>
            <tr>
                <th>Позиция</th>
                <th>Цена</th>
                <th>Количество</th>
                <th>Добавить</th>
                <th>Удалить количество</th>
            </tr>
        </thead>
        <tbody>
            <tr class="price-item" data-price="1000" data-name="Позиция 1">
                <td>Позиция 1</td>
                <td>1000 ₽</td>
                <td><input type="number" class="quantity" value="1" min="1" max="10"></td>
                <td><button class="toggle-btn">Добавить</button></td>
                <td><button class="remove-btn">Удалить количество</button></td>
            </tr>
            <tr class="price-item" data-price="1500" data-name="Позиция 2">
                <td>Позиция 2</td>
                <td>1500 ₽</td>
                <td><input type="number" class="quantity" value="1" min="1" max="10"></td>
                <td><button class="toggle-btn">Добавить</button></td>
                <td><button class="remove-btn">Удалить количество</button></td>
            </tr>
        </tbody>
    </table>

    <h2>Позиции для вычитания</h2>
    <table id="subtraction-table">
        <thead>
            <tr>
                <th>Позиция</th>
                <th>Цена</th>
                <th>Количество</th>
                <th>Добавить</th>
                <th>Удалить количество</th>
            </tr>
        </thead>
        <tbody>
            <tr class="price-item" data-price="1000" data-name="Позиция 1">
                <td>Позиция 1</td>
                <td>1000 ₽</td>
                <td><input type="number" class="quantity" value="1" min="1" max="10"></td>
                <td><button class="toggle-btn">Добавить</button></td>
                <td><button class="remove-btn">Удалить количество</button></td>
            </tr>
            <tr class="price-item" data-price="1500" data-name="Позиция 2">
                <td>Позиция 2</td>
                <td>1500 ₽</td>
                <td><input type="number" class="quantity" value="1" min="1" max="10"></td>
                <td><button class="toggle-btn">Добавить</button></td>
                <td><button class="remove-btn">Удалить количество</button></td>
            </tr>
        </tbody>
    </table>

    <div id="subtraction-container">
        <label for="base-amount">Введите свою сумму:</label>
        <input type="number" id="base-amount" placeholder="Введите сумму для расчёта" value="0">

        <div class="total">
            Итоговая сумма: <span id="total-price">0 ₽</span>
            <br>
            Состав расчёта: <span id="breakdown">0 ₽</span>
        </div>
    </div>

    <button id="reset-btn">Сбросить все расчеты</button>
</div>

<script>
    let totalAmount = 0;
    let baseAmount = 0;
    let breakdown = {};

    const totalPriceElement = document.getElementById('total-price');
    const breakdownElement = document.getElementById('breakdown');
    const baseAmountInput = document.getElementById('base-amount');

    function handleTable(tableId, operation) {
        const table = document.getElementById(tableId);
        const items = table.querySelectorAll('.price-item');

        items.forEach((item) => {
            const price = parseInt(item.getAttribute('data-price'));
            const name = item.getAttribute('data-name');
            const buttonAdd = item.querySelector('.toggle-btn');
            const quantityInput = item.querySelector('.quantity');
            const buttonRemove = item.querySelector('.remove-btn');

            buttonAdd.addEventListener('click', () => {
                const quantity = parseInt(quantityInput.value);
                const adjustment = price * quantity;

                if (operation === "add") totalAmount += adjustment;
                else totalAmount -= adjustment;

                const key = `${name} (${price} ₽)`;
                if (breakdown[key]) {
                    breakdown[key] += operation === "add" ? quantity : -quantity;
                    if (breakdown[key] <= 0) delete breakdown[key];
                } else if (operation === "add") breakdown[key] = quantity;

                updateBreakdown();
            });

            buttonRemove.addEventListener('click', () => {
                const quantity = parseInt(quantityInput.value);
                const adjustment = price * quantity;

                if (operation === "add") totalAmount -= adjustment;
                else totalAmount += adjustment;

                const key = `${name} (${price} ₽)`;
                if (breakdown[key]) {
                    breakdown[key] -= operation === "add" ? quantity : -quantity;
                    if (breakdown[key] <= 0) delete breakdown[key];
                }

                updateBreakdown();
            });
        });
    }

    function updateBreakdown() {
        const totalSum = baseAmount + totalAmount;
        totalPriceElement.textContent = totalSum + ' ₽';

        const breakdownText = Object.keys(breakdown).map((key) => {
            const quantity = breakdown[key];
            return quantity > 1 ? `${key} × ${quantity}` : key;
        });

        if (baseAmount > 0) {
            breakdownText.unshift(`Сумма: ${baseAmount} ₽`);
        }

        breakdownElement.textContent = breakdownText.join(' + ') + ' = ' + totalSum + ' ₽';
    }

    baseAmountInput.addEventListener('input', () => {
        baseAmount = parseInt(baseAmountInput.value);
        if (isNaN(baseAmount)) baseAmount = 0;
        updateBreakdown();
    });

    document.getElementById('reset-btn').addEventListener('click', () => {
        totalAmount = 0;
        baseAmount = 0;
        breakdown = {};
        baseAmountInput.value = 0;
        updateBreakdown();
        document.querySelectorAll('.quantity').forEach((input) => (input.value = 1));
    });

    handleTable("price-table", "add");
    handleTable("subtraction-table", "subtract");
</script>

[/html]

0

8

  • Автор: пэрсик
  • пэрсик
  • Администратор
  • Сообщений: 19
  • валюта: 999
  • Уважение: +0
  • текст текст текст

    вариант расположения

[html] <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f5f5f5;
        }

        .container {
            max-width: 1200px;
            margin: 20px auto;
            padding: 20px;
            background-color: #fff;
            border-radius: 15px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        }

        .header {
            text-align: center;
            background-color: #b7323f;
            padding: 10px;
            color: white;
            border-radius: 15px 15px 0 0;
        }

        .section {
            margin: 20px 0;
        }

        .section h2 {
            text-align: center;
            margin-bottom: 20px;
            color: #333;
        }

        .items {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 15px;
            max-height: 200px;
            overflow-y: auto;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 10px;
            background-color: #f9f9f9;
        }

        .item {
            background-color: #f5f5f5;
            border: 1px solid #ddd;
            border-radius: 10px;
            padding: 10px;
            width: 200px;
            text-align: center;
            position: relative;
        }

        .item .quantity {
            font-size: 14px;
            margin: 5px 0;
        }

        .item .price {
            font-size: 16px;
            font-weight: bold;
            color: #333;
        }

        .item button {
            background-color: #b7323f;
            color: white;
            border: none;
            padding: 5px 10px;
            border-radius: 5px;
            cursor: pointer;
        }

        .item button:hover {
            background-color: #a12d38;
        }

        .summary {
            text-align: center;
            margin-top: 30px;
            font-size: 18px;
            font-weight: bold;
        }

        .reset-btn {
            display: block;
            margin: 20px auto;
            padding: 10px 20px;
            background-color: #f44336;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        .reset-btn:hover {
            background-color: #e53935;
        }

        .custom-sum {
            text-align: center;
            margin: 20px 0;
        }

        .custom-sum input {
            padding: 5px;
            font-size: 16px;
            width: 150px;
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">Банк</div>

        <div class="section">
            <h2>Заработать</h2>
            <div class="items" id="earn-section">
                <!-- Генерация элементов через JavaScript -->
            </div>
        </div>

        <div class="section">
            <h2>Потратить</h2>
            <div class="items" id="spend-section">
                <!-- Генерация элементов через JavaScript -->
            </div>
        </div>

        <div class="custom-sum">
            <label for="custom-input">Введите свою сумму: </label>
            <input type="number" id="custom-input" placeholder="0">
            <button id="add-custom">Добавить</button>
            <button id="subtract-custom">Вычесть</button>
        </div>

        <div class="summary">
            Итоговая сумма: <span id="total-price">0 ₽</span>
            <br>
            Состав расчёта: <span id="breakdown">0 ₽</span>
        </div>

        <button class="reset-btn" id="reset-btn">Сбросить все расчеты</button>
    </div>

    <script>
        const itemsData = Array.from({ length: 36 }, (_, i) => ({
            name: `Анкета и заполнение орг-кодов ${i + 1}`,
            price: 1000
        }));

        let totalAmount = 0;
        let breakdown = {};

        const earnSection = document.getElementById('earn-section');
        const spendSection = document.getElementById('spend-section');
        const totalPriceElement = document.getElementById('total-price');
        const breakdownElement = document.getElementById('breakdown');
        const resetButton = document.getElementById('reset-btn');
        const customInput = document.getElementById('custom-input');
        const addCustomButton = document.getElementById('add-custom');
        const subtractCustomButton = document.getElementById('subtract-custom');

        function updateSummary() {
            const breakdownText = Object.keys(breakdown).map(key => {
                const { name, quantity, price } = breakdown[key];
                return `${name}: ${quantity} × ${price} ₽`;
            }).join('<br>');

            totalPriceElement.textContent = `${totalAmount} ₽`;
            breakdownElement.innerHTML = breakdownText || '0 ₽';
        }

        function createItemElement(item, sectionType) {
            const itemElement = document.createElement('div');
            itemElement.classList.add('item');

            const nameElement = document.createElement('div');
            nameElement.textContent = item.name;

            const quantityElement = document.createElement('input');
            quantityElement.type = 'number';
            quantityElement.value = 1;
            quantityElement.min = 1;
            quantityElement.classList.add('quantity');

            const priceElement = document.createElement('div');
            priceElement.classList.add('price');
            priceElement.textContent = `${item.price} ₽`;

            const addButton = document.createElement('button');
            addButton.textContent = 'Добавить';

            const removeButton = document.createElement('button');
            removeButton.textContent = 'Удалить';

            addButton.addEventListener('click', () => {
                const quantity = parseInt(quantityElement.value);

                if (sectionType === 'earn') {
                    totalAmount += item.price * quantity;
                } else {
                    totalAmount -= item.price * quantity;
                }

                if (!breakdown[item.name]) {
                    breakdown[item.name] = { name: item.name, quantity: 0, price: item.price };
                }

                breakdown[item.name].quantity += quantity;
                updateSummary();
            });

            removeButton.addEventListener('click', () => {
                const quantity = parseInt(quantityElement.value);

                if (breakdown[item.name]) {
                    breakdown[item.name].quantity -= quantity;

                    if (breakdown[item.name].quantity <= 0) {
                        delete breakdown[item.name];
                    }

                    if (sectionType === 'earn') {
                        totalAmount -= item.price * quantity;
                    } else {
                        totalAmount += item.price * quantity;
                    }

                    updateSummary();
                }
            });

            itemElement.appendChild(nameElement);
            itemElement.appendChild(quantityElement);
            itemElement.appendChild(priceElement);
            itemElement.appendChild(addButton);
            itemElement.appendChild(removeButton);

            return itemElement;
        }

        itemsData.slice(0, 2).forEach(item => {
            earnSection.appendChild(createItemElement(item, 'earn'));
            spendSection.appendChild(createItemElement(item, 'spend'));
        });

        itemsData.slice(2).forEach(item => {
            const hiddenItem = createItemElement(item, 'earn');
            earnSection.appendChild(hiddenItem);
        });

        addCustomButton.addEventListener('click', () => {
            const customValue = parseInt(customInput.value);
            if (!isNaN(customValue)) {
                totalAmount += customValue;
                breakdown['Собственная сумма'] = {
                    name: 'Собственная сумма',
                    quantity: 1,
                    price: customValue
                };
                updateSummary();
            }
        });

        subtractCustomButton.addEventListener('click', () => {
            const customValue = parseInt(customInput.value);
            if (!isNaN(customValue)) {
                totalAmount -= customValue;
                breakdown['Собственная сумма'] = {
                    name: 'Собственная сумма',
                    quantity: -1,
                    price: customValue
                };
                updateSummary();
            }
        });

        resetButton.addEventListener('click', () => {
            totalAmount = 0;
            breakdown = {};
            updateSummary();
        });
    </script>[/html]

0

Страница: 1

Вы здесь » jjjjjjjjay » Тестовый форум » Тестовое сообщение

Рейтинг форумов | Создать форум бесплатно