Форум

samdo · #1 (**permalink**) 18.10.2021, 21:39

Приветствую! Подскажите, плиз, решение для автоматического progressbar. Он должен заполняться постепенно, желательно через указанный промежуток времени на определенное количество процентов и поинтов. Например, он должен заполниться на 100% (что составляет 10000 поинтов) через месяц, и, ежедневно он постепенно наполняется (можно через какой-то промежуток времени). А если он еще будет показывать и поинты и проценты, то это было бы идеально. Спасибо!!!
P.S. Поинты - взято спонтанно, можно назвать и очки, и коины, как угодно...

voraa · #2 (**permalink**) 19.10.2021, 20:48

Надеюсь, что страница не должна быть открыта в течении месяца.
Значит то, насколько заполняется ваш прогресбар, должно храниться на сервере. Там учитываться время начала, сколько прошло до очередного открытия страницы... И так для каждого пользователя.
Эти вопросы у вас как то решены?
А сделать, что бы прогресбар постепенно заполнялся от заданного значения с определенной скоростью - несложно.
Но сначала надо решить вопрос, что бы сервер при открытии страницы выдал с какого значения в этот раз заполнять, Или хотя бы посылал дату начала заполнения, а уж потом самим считать, насколько должно быть заполнено к сегодняшнему дню.

od0201 · #3 (**permalink**) 19.10.2021, 20:54

<!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>

Форум

Справочник

Discord чат

Курсы javascript