Question 11161 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Can the progress bar go according to the real time throughout the day? – Jquery

I have my site under construction.
This will last 1 day, from 00:00 to 23:59.
I would like the progress bar to go according to the time throughout the day.
For example:
If the time is 06:00 the bar should show 25%
if it’s 12:00 it shows 50%,
if it is 18:00 it should show 75%.
However, if it is 18:15, it should show the percentage in detail, for example 75.8%.
Is it possible for it to happen and work throughout the day? Thanks

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>
Tags:

2

Answers


  1. 0

    Just Divide the total seconds elapsed by total seconds in a day to get the percentage…

       
// 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>
    Login or Signup to reply.
  2. 0

    Simply calculate the percentage of day in 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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search