Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 18.10.2021, 21:39
Аспирант
Отправить личное сообщение для samdo Посмотреть профиль Найти все сообщения от samdo
 
Регистрация: 27.05.2017
Сообщений: 96

Автоматический progressbar
Приветствую! Подскажите, плиз, решение для автоматического progressbar. Он должен заполняться постепенно, желательно через указанный промежуток времени на определенное количество процентов и поинтов. Например, он должен заполниться на 100% (что составляет 10000 поинтов) через месяц, и, ежедневно он постепенно наполняется (можно через какой-то промежуток времени). А если он еще будет показывать и поинты и проценты, то это было бы идеально. Спасибо!!!
P.S. Поинты - взято спонтанно, можно назвать и очки, и коины, как угодно...
Ответить с цитированием
  #2 (permalink)  
Старый 19.10.2021, 20:48
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,693

Надеюсь, что страница не должна быть открыта в течении месяца.
Значит то, насколько заполняется ваш прогресбар, должно храниться на сервере. Там учитываться время начала, сколько прошло до очередного открытия страницы... И так для каждого пользователя.
Эти вопросы у вас как то решены?
А сделать, что бы прогресбар постепенно заполнялся от заданного значения с определенной скоростью - несложно.
Но сначала надо решить вопрос, что бы сервер при открытии страницы выдал с какого значения в этот раз заполнять, Или хотя бы посылал дату начала заполнения, а уж потом самим считать, насколько должно быть заполнено к сегодняшнему дню.
Ответить с цитированием
  #3 (permalink)  
Старый 19.10.2021, 20:54
Кандидат Javascript-наук
Отправить личное сообщение для od0201 Посмотреть профиль Найти все сообщения от od0201
 
Регистрация: 07.05.2020
Сообщений: 107

<!DOCTYPE html>
<html>
<style>
#myProgress {
  width: 100%;
  height: 20px;
  background-color: #ddd;
}

#myBar {
  width: 0%;
  height: 100%;
  background-color: #04AA6D;
}
#myText {
  width: 100%;
  height: 100%;
  text-align: center;
  color: #e20909;
  position: absolute;
}
</style>
<body>

<h3>прошло времени в текущем месяце</h3>
<div id="myProgress">
  <div id="myText">0%</div>
  <div id="myBar"> </div>
</div>


<script>
  let point=10000000
  move()
  setInterval(() => move(), 100);
  function move() {
    let date = new Date(), y = date.getFullYear(), m = date.getMonth();
    let firstDay = new Date(y, m, 1);
    let lastDay = new Date(y, m + 1, 1);
    let precents=100*(date-firstDay)/(lastDay-firstDay)
    document.getElementById("myBar").style.width = precents + "%";
    document.getElementById("myText").innerText=`${Math.floor(precents)}%  или ${Math.floor(point*precents/100)} из ${point} условных интервалов`
  }
</script>

</body>
</html>

Последний раз редактировалось od0201, 19.10.2021 в 21:02.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Progressbar с таймером. Feex Элементы интерфейса 22 21.02.2016 23:55
Счетчик кликов в progressbar ksmnvt Элементы интерфейса 1 18.10.2013 08:10
Редирект и автоматический клик на кнопку Godwar Элементы интерфейса 30 20.03.2013 16:26
Автоматический пересчёт при смене значения. sergeos Работа 3 05.02.2013 13:44
Виснет progressbar Eser Общие вопросы Javascript 0 04.07.2012 13:46