Пришла в голову идея сгенерировать шкалу для накопления денег. Раньше я этого сделать в принципе не могла, а теперь говорят ИИ все может. Пробую. <div style="text-align: center;"> <h2 style="color: yellow;">Накоплено: 3057000 руб.</h2> <h3>Цель: 4000000 руб.</h3> <div style="width: 80%; background-color: #e0e0e0; border-radius: 25px; overflow: hidden; margin: auto;"> <div style="height: 30px; background-color: #4caf50; width: 76%;"></div> <!-- 76% от 4000000 --> </div> </div> обновление <!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: #f0f0f0; display: flex; justify-content: center; align-items: center; height: 100vh; flex-direction: column; } .progress-container { width: 4cm; /* Ширина шкалы */ background-color: #e0e0e0; /* Цвет фона шкалы */ border-radius: 25px; position: relative; margin-top: 20px; } .progress-bar { height: 30px; background-color: #007bff; /* Синий цвет прогресс-бара */ width: 0; /* Начальная ширина */ transition: width 0.5s ease; /* Плавный переход */ } .amount { color: yellow; /* Цвет цифр */ font-size: 24px; /* Размер шрифта */ text-align: center; } .labels { display: flex; justify-content: space-between; font-size: 14px; /* Размер шрифта для меток */ } </style> </head> <body> <div class="labels"> <span>0 руб.</span> <span>4000000 руб.</span> </div> <div class="progress-container"> <div class="progress-bar" id="progressBar"></div> </div> <div class="amount" id="amountDisplay">Накоплено: 3057000 руб.</div> <button class="button" onclick="updateProgress()">Обновить сумму</button> <script> const targetAmount = 4000000; // Целевая сумма let currentAmount = 3057000; // Текущая сумма function updateProgress() { // Здесь можно добавить логику для изменения текущей суммы // Например, увеличим на случайную величину от 10000 до 50000 currentAmount += Math.floor(Math.random() * (50000 - 10000 + 1)) + 10000; // Ограничиваем текущую сумму целевой суммой if (currentAmount > targetAmount) { currentAmount = targetAmount; } // Обновляем прогресс-бар const progressBar = document.getElementById('progressBar'); const amountDisplay = document.getElementById('amountDisplay'); const progressPercentage = (currentAmount / targetAmount) * 100; progressBar.style.width = progressPercentage + '%'; amountDisplay.textContent = 'Накоплено: ' + currentAmount + ' руб.'; } // Инициализация прогресс-бара при загрузке страницы updateProgress(); </script> </body> </html>
1 месяц назад