js24小时可拖动进度条

要实现可拖动的24小时进度条，可以在上面的代码基础上进行一些修改。具体的实现方法如下：

HTML代码：

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

CSS代码：

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

.progress {
  width: 0;
  height: 100%;
  background-color: #007bff;
  position: absolute;
  top: 0;
  left: 0;
}

.handle {
  width: 10px;
  height: 10px;
  background-color: #007bff;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  cursor: pointer;
}

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");
  progressBar.style.width = percentage + "%";
}

function handleDrag(e) {
  var progressBar = document.querySelector(".progress");
  var progressbarRect = progressBar.getBoundingClientRect();
  var offsetX = e.clientX - progressbarRect.left;
  var percentage = (offsetX / progressbarRect.width) * 100;
  progressBar.style.width = percentage + "%";
}

var handle = document.querySelector(".handle");
handle.addEventListener("mousedown", function() {
  document.addEventListener("mousemove", handleDrag);
});

document.addEventListener("mouseup", function() {
  document.removeEventListener("mousemove", handleDrag);
});

updateProgressBar();
setInterval(updateProgressBar, 1000);

在这个例子中，我们在HTML代码中添加了一个名为“progress”的div元素来表示进度条，以及一个名为“handle”的div元素来表示拖动手柄。在CSS代码中，我们添加了一些样式来实现拖动手柄的外观和样式。在JavaScript代码中，我们定义了一个名为handleDrag的函数，该函数会在鼠标移动时被调用，用于计算拖动手柄的位置，并更新进度条的宽度。我们还添加了mousedown和mouseup事件监听器，用于启用和禁用拖动手柄的功能。同时，我们也更新了updateProgressBar函数，以便在拖动手柄时也能够自动更新进度条的宽度。