js24小时进度条

你可以通过JavaScript来实现一个24小时进度条，具体的实现方法如下：

HTML代码：

<div class="progress-bar"></div>

CSS代码：

.progress-bar {
  width: 100%;
  height: 20px;
  background-color: #ddd;
  position: relative;
}

.progress-bar::before {
  content: "";
  display: block;
  width: 0;
  height: 100%;
  background-color: #007bff;
  position: absolute;
  top: 0;
  left: 0;
  transition: width 1s linear;
}

JavaScript代码：

function updateProgressBar() {
  var now = new Date();
  var h = now.getHours();
  var m = now.getMinutes();
  var s = now.getSeconds();
  var totalSeconds = (h * 60 * 60) + (m * 60) + s;
  var percentage = (totalSeconds / 86400) * 100;
  var progressBar = document.querySelector(".progress-bar");
  progressBar.style.width = percentage + "%";
}

setInterval(updateProgressBar, 1000);

在这个例子中，我们首先定义了一个带有class为“progress-bar”的div元素，用于显示进度条。然后，我们使用CSS样式来定义进度条的外观。在JavaScript代码中，我们定义了一个名为updateProgressBar的函数，该函数将获取当前时间，并计算出当前时间占一天总时间的百分比。然后，我们通过使用CSS的transition属性来实现进度条的动画效果，并使用setInterval函数每秒更新一次进度条。