javascript - 以小时和分钟为单位的范围 slider javascript

Question

我试图分别以小时和分钟显示 slider 的值。我对 JS 还很陌生，仍在努力了解它的工作原理。

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

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

编辑:我添加了一个 If 语句来格式化只有一位数的分钟。

var slider = document.getElementById("myRange");
var hours = Math.floor(slider.value / 60);
var minutes = slider.value % 60;
var minuteOutput = $("#minutes");
var hourOutput = $("#hours");
var formattedMinutes = ("0"+minutes);
hourOutput.innerHTML = hours;
minuteOutput.innerHTML = minutes;
if(minutes < 10){
minuteOutput.innerHTML = formattedMinutes;}
else {minuteOutput.innerHTML = minutes;}

.slider {
    -webkit-appearance: none;
    appearance: none;
    width: 20em;
    height: 1em;
    background: #2C4461;
    outline: none;
    margin-top: 2em;
    border-radius: 1em;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    border-radius: 50%;
    width: 1.5em;
    height: 1.5em;
    background: #BAC5D2;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slidecontainer">
  <h3>
   <span id="hours"></span>
   <span id="minutes"></span>
  </h3>
  <input type="range" min="1" max="1440" value="300"      class="slider" id="myRange">
</div>

Answer 1

$("#minutes")

将返回一个数组。所以你必须像访问它一样访问它:

$("#minutes")[0]

这将返回第一个元素。参见 this explanation for more

然后将 onchange 事件添加到您的 slider 以启用实时更新。

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

updateSlider();

.slider {
    -webkit-appearance: none;
    appearance: none;
    width: 20em;
    height: 1em;
    background: #2C4461;
    outline: none;
    margin-top: 2em;
    border-radius: 1em;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    border-radius: 50%;
    width: 1.5em;
    height: 1.5em;
    background: #BAC5D2;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slidecontainer">
  <h3>
   <span id="hours"></span>
   <span id="minutes"></span>
  </h3>
  <input type="range" min="1" max="1440" value="300"      class="slider" id="myRange" onchange="updateSlider()">
</div>