Автоматический progressbar
Приветствую! Подскажите, плиз, решение для автоматического progressbar. Он должен заполняться постепенно, желательно через указанный промежуток времени на определенное количество процентов и поинтов. Например, он должен заполниться на 100% (что составляет 10000 поинтов) через месяц, и, ежедневно он постепенно наполняется (можно через какой-то промежуток времени). А если он еще будет показывать и поинты и проценты, то это было бы идеально. Спасибо!!!
P.S. Поинты - взято спонтанно, можно назвать и очки, и коины, как угодно... |
Надеюсь, что страница не должна быть открыта в течении месяца.
Значит то, насколько заполняется ваш прогресбар, должно храниться на сервере. Там учитываться время начала, сколько прошло до очередного открытия страницы... И так для каждого пользователя. Эти вопросы у вас как то решены? А сделать, что бы прогресбар постепенно заполнялся от заданного значения с определенной скоростью - несложно. Но сначала надо решить вопрос, что бы сервер при открытии страницы выдал с какого значения в этот раз заполнять, Или хотя бы посылал дату начала заполнения, а уж потом самим считать, насколько должно быть заполнено к сегодняшнему дню. |
<!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>
|
| Часовой пояс GMT +3, время: 15:57. |