以小时和分钟为单位的范围滑块javascript

我试图以小时和分钟分别显示滑块的值。我对JS还是一个新手，仍然在努力了解它的工作原理

到目前为止，我有一个24小时内最大值为1440分钟的工作滑块。在JS中，我试图将其划分为小时和分钟，并使用innerHtml将这些值放入特定的HTML ID标记中。 不幸的是，这些值根本不显示，H3和特定ID仍然为空

我还需要一种在拖动滑块时更新输出的方法。 你能看一下并给我一个正确方向的提示吗

编辑：我添加了一个If语句，以在分钟值仅为一位数时格式化分钟

var slider=document.getElementByIdmyRange； var小时数=Math.floorslider.value/60； var分钟=滑块。值%60； var minuteOutput=$minutes； var hourOutput=$hours； var formattedMinutes=0+分钟； hourOutput.innerHTML=小时； minuteOutput.innerHTML=分钟； ifmin<10{ minuteOutput.innerHTML=formattedMinutes；} else{minuteOutput.innerHTML=minutes；} .滑块{ -webkit外观：无； 外观：无； 宽度：20em； 高度：1米； 背景：2C4461； 大纲：无； 边缘顶部：2米； 边界半径：1米； } .滑块：：-webkit滑块拇指{ -webkit外观：无； 外观：无； 边界半径：50%； 宽度：1.5em； 高度：1.5em； 背景：BAC5D2； } 替换为下面的

var minuteOutput = $("#minutes")[0];
var hourOutput = $("#hours")[0];

$minutes将返回第一项为元素的数组

Threfore，$minutes[0]将返回您可以在其中更改内部HTML的元素

$("#minutes")

将返回一个数组。因此，您必须像访问一样访问它：

$("#minutes")[0]

它将返回第一个元素。看

然后将onchange事件添加到滑块以启用实时更新

函数更新滑动器{ var slider=document.getElementByIdmyRange； var小时数=Math.floorslider.value/60； var分钟=滑块。值%60； var minuteOutput=$minutes[0]； var hourOutput=$hours[0]； hourOutput.innerHTML=小时； minuteOutput.innerHTML=分钟； } 更新滑翔机； .滑块{ -webkit外观：无； 外观：无； 宽度：20em； 高度：1米； 背景：2C4461； 大纲：无； 边缘顶部：2米； 边界半径：1米； } .滑块：：-webkit滑块拇指{ -webkit外观：无； 外观：无； 边界半径：50%； 宽度：1.5em； 高度：1.5em； 背景：BAC5D2； } 您正在将jquery与js混合使用

问题就在这方面 hourOutput.innerHTML=小时

您可以执行hourOutput.get0，它将返回DOM元素，这样您就可以执行hourOutput.get0.innerHTML=hours，或者只使用jquery函数html，比如hourOutput.htmlhours

---

您缺少以下几点：

displayValue不在HTML中，但它不是问题的主要原因

在jQ选择中，您没有以实际元素为目标，您只有数组结果（也称为混合JS和jQ），选择该数组中的第一个元素应仅为一个，如果您正确地确定了目标，则使用它

您没有滑块位置更改的事件处理。基本上，您的代码执行一次并计算一次小时和分钟，但在滑块移动时从不重新计算

这里有一种解决方法：

HTML:

CSS可以保持不变：

下面是一个演示：

---

你能详细说明一下为什么这会解决我的问题吗？拖动滑块时，有什么方法可以更新输出？太好了，谢谢！不过我使用了.oninput，它将在拖动句柄时更新值。

var hourOutput = $("#hours"); // Returns a jquery object

<div class="slidecontainer">
  <h3 id="displayValue">
   <span id="hours">min</span>
   <span id="minutes">hour</span>
  </h3>
  <input type="range" min="1" max="1440" value="500" class="slider" id="myRange">
</div>

var slider = document.getElementById("myRange");
var output = document.getElementById("displayValue");
var hours = Math.floor(slider.value / 60);
var minutes = slider.value % 60;
var minuteOutput = $("#minutes")[0];
var hourOutput = $("#hours")[0];
var hours = Math.floor(slider.value / 60);
var minutes = slider.value % 60;
hourOutput.innerHTML = hours;
minuteOutput.innerHTML = minutes

$('.slider').change(function() {
                var hours = Math.floor(slider.value / 60);
        var minutes = slider.value % 60;
        hourOutput.innerHTML = hours;
        minuteOutput.innerHTML = minutes
});