javascript 进度条是否可以根据全天的真实的时间进行调整？

qaxu7uf2 于 2023-02-18 发布在 Java

关注(0)|答案(2)|浏览(100)

我的网站正在建设中。这将持续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>

JavaScript

来源：https://stackoverflow.com/questions/75480472/can-the-progress-bar-go-according-to-the-real-time-throughout-the-day

2条答案

按热度按时间

qjp7pelc1#

只需计算checkTime()中一天的百分比
pc = Math.round(((hr * 60 * 60 + min * 60 + sec) / (24 * 60 * 60)) * 1000) / 10;

let pc;

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");
  pc = Math.round(((hr * 60 * 60 + min * 60 + sec) / (24 * 60 * 60)) * 1000) / 10;

  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 >= pc) {
    progress.style.width = `${pc}%`;
    percentage.innerHTML = `${pc}%`;
  } 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>

赞(0）回复(0）举报 2023-02-18

flvtvl502#

只需将经过的总秒数除以一天中的总秒数即可得出百分比...

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

赞(0）回复(0）举报 2023-02-18

我来回答

javascript 进度条是否可以根据全天的真实的时间进行调整？

2条答案

相关问题

热门标签

最新问答