Может ли индикатор прогресса идти в соответствии с реальным временем в течение дня?

У меня есть мой сайт в разработке. Это продлится 1 день, с 00:00 до 23:59. Я хотел бы, чтобы индикатор выполнения шел в соответствии со временем в течение дня. Например: Если время 06:00, полоса должна показывать 25% если сейчас 12:00 показывает 50%, если это 18:00, он должен показать 75%. Однако, если это 18:15, процентное соотношение должно отображаться подробно, например, 75,8%. Возможно ли, чтобы это произошло и работало в течение дня? Спасибо

function checkTime(){
  var today = new Date();
  var hr = today.getHours();
  var min = today.getMinutes();
  var sec = today.getSeconds();
  var hours = document.querySelector(".hours");
  var minutes = document.querySelector(".minutes");
  var seconds = document.querySelector(".seconds");
  
  if (hr < 10){
    hr = "0" + hr;
  }
    if (min < 10){
    min = "0" + min;
  }
    if (sec < 10){
    sec = "0" + sec;
  }
  
  hours.textContent = hr + " : ";
  minutes.textContent = min + " : ";
  seconds.textContent = sec;
}

setInterval(checkTime, 500);





const progress = document.querySelector('.progress')
const percentage = document.querySelector('.progress span')

let per = 0;
function progressLoad(){
if (per>=35){
progress.style.width = `35%`;
percentage.innerHTML = "35%"

}else{
progress.style.width = `${per}%`;
percentage.innerHTML = `${per}%`;

}
per++

}

setInterval(progressLoad,90)

.bg {background:#08093cb3;}

.hours, .minutes, .seconds {
  float: left; 
  font-size: 1.5em;
  color: #008c8c;
}

.progress-wrapper {
  width: 100%;
  background: #222;
  display: flex;
  margin-bottom: 20px;
  border-radius: 5px;
}
        
.progress {
  width: 0%;
  height: 10px;
  background: green;
  border-radius: 5px;
  display: flex;
  justify-content: flex-end;
}
        
.progress span {
  color: white;
  position: relative;
  top: 13px;
  left: 25px;
  font-weight: 800;
}

<body class = "bg">

  <div class = "hours"></div>
  <div class = "minutes"></div>
  <div class = "seconds"></div>
  <br><br>
        
  <div class = "progress-wrapper">
  <div class = "progress">
            <span>0%</span>
  </div>
  </div>

</body>

В чем твой баг, напиши правильно

— 17.02.2023 06:49

javascript html jquery

17.02.2023 06:13

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Просто разделите общее количество прошедших секунд на общее количество секунд за день, чтобы получить процент...

   
// to calculate time elapsed
// variables defined outside the function 
var today = new Date();
var hr = today.getHours();
var min = today.getMinutes();
var sec = today.getSeconds();

function checkTime(){
  hr = today.getHours();
  min = today.getMinutes();
  sec = today.getSeconds();
  var hours = document.querySelector(".hours");
  var minutes = document.querySelector(".minutes");
  var seconds = document.querySelector(".seconds");
  
  if (hr < 10){
    hr = "0" + hr;
  }
    if (min < 10){
    min = "0" + min;
  }
    if (sec < 10){
    sec = "0" + sec;
  }
  
  hours.textContent = hr + " : ";
  minutes.textContent = min + " : ";
  seconds.textContent = sec;
}

setInterval(checkTime, 500);





const progress = document.querySelector('.progress')
const percentage = document.querySelector('.progress span')

function progressLoad(){
    let timeElapsed = hr*60*60 + min*60 + sec

    let per = 
 parseInt(timeElapsed*100/(24*60*60));

/*
if (per>=35){
progress.style.width = `35%`;
percentage.innerHTML = "35%"

}else{
    progress.style.width = `${per}%`;
    percentage.innerHTML = `${per}%`;

}
per++
*/
progress.style.width = `${per}%`;
percentage.innerHTML = `${per}%`;

}

setInterval(progressLoad,90)

.bg {background:#08093cb3;}

.hours, .minutes, .seconds {
  float: left; 
  font-size: 1.5em;
  color: #008c8c;
}

.progress-wrapper {
  width: 100%;
  background: #222;
  display: flex;
  margin-bottom: 20px;
  border-radius: 5px;
}
        
.progress {
  width: 0%;
  height: 10px;
  background: green;
  border-radius: 5px;
  display: flex;
  justify-content: flex-end;
}
        
.progress span {
  color: white;
  position: relative;
  top: 13px;
  left: 25px;
  font-weight: 800;
}

<body class = "bg">

  <div class = "hours"></div>
  <div class = "minutes"></div>
  <div class = "seconds"></div>
  <br><br>
        
  <div class = "progress-wrapper">
  <div class = "progress">
            <span>0%</span>
  </div>
  </div>

</body>

17.02.2023 07:04

Ответ принят как подходящий

Просто рассчитайте процент дня в checkTime()

pc = Math.round(((hr * 60 * 60 + min * 60 + sec) / (24 * 60 * 60)) * 1000) / 10;

let pc,
  per = 0;

function checkTime() {
  var today = new Date();
  var t = [today.getHours(), today.getMinutes(), today.getSeconds()];
  pc = Math.round(((t[0] * 60 * 60 + t[1] * 60 + t[2]) / (24 * 60 * 60)) * 1000) / 10;
  document.querySelector(".time").textContent = t.map((d) => (d < 10 ? "0" + d : d)).join(" : ");
}

function progressLoad() {
  document.querySelector(".progress").style.width = `${per >= pc ? pc : per}%`;
  document.querySelector(".progress span").innerHTML = `${per >= pc ? pc : per}%`;
  per++;
}
checkTime();
setInterval(checkTime, 500);
setInterval(progressLoad, 90);

.bg {
  background: #08093cb3;
}

.time {
  float: left;
  font-size: 1.5em;
  color: #008c8c;
}

.progress-wrapper {
  width: 100%;
  background: #222;
  display: flex;
  margin-bottom: 20px;
  border-radius: 5px;
}

.progress {
  width: 0%;
  height: 10px;
  background: green;
  border-radius: 5px;
  display: flex;
  justify-content: flex-end;
}

.progress span {
  color: white;
  position: relative;
  top: 13px;
  left: 25px;
  font-weight: 800;
}

<body class = "bg">
    <div class = "time"></div>
    <br><br>
    <div class = "progress-wrapper">
        <div class = "progress">
            <span>0%</span>
        </div>
    </div>
</body>

17.02.2023 07:04

Другие вопросы по теме

Пробел между body и div

Удаление класса css тега <img> после его загрузки

Как использовать несколько таблиц с несколькими тегами выбора

Как сделать так, чтобы родительский div не передавал щелчок дочернему div

Как не получить ошибку при редактировании данных, если я не буду загружать ни одно изображение в юзере

Динамически добавлять строки таблицы в HTML-шаблон электронной почты

JS: замена всех вхождений слова в html элементом <span> ТОЛЬКО для p, span и div. Не работает, если родительский узел содержит слово

Как управлять несколькими вкладками с помощью jquery на одной странице, не влияя друг на друга?

Почему Edge не поддерживает изображения AVIF?

Как добавить треугольник в конце div с непрозрачностью 0,2?

Может ли индикатор прогресса идти в соответствии с реальным временем в течение дня?

Ответы 2

Другие вопросы по теме

Похожие вопросы