Question

我试图分别以小时和分钟显示滑块的值。我对JS很陌生，仍然试图了解它是如何工作的。

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

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

编辑：我添加了一个If-Statement来格式化它们的值只有一位数的分钟。

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事件以启用实时更新。

＆＃13;

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();

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 2

替换为以下

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

$("#minutes")将返回第一个项目为元素的数组。

因此，$("#minutes")[0]将返回您可以更改内部HTML的元素。

Answer 3

您正在将jquery与js混合

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

问题出在这一行 hourOutput.innerHTML =小时;

你要么hourOutput.get(0）会返回DOM元素，这样你就可以hourOutput.get(0).innerHTML = hours或只使用html之类的jquery函数hourOutput.html(hours)。

Answer 4

你遗漏了几件事：

displayValue不在HTML中，但它不是问题的主要原因。
你没有在你的jQ选择中定位实际元素，你只有数组结果（也称为＆＃34;将JS与jQ和＃34混合;），选择该数组中的第一个元素（如果你的目标是正确的话应该只有一个）然后使用它。
滑块位置的更改没有事件处理。基本上，您的代码执行一次并计算一次小时和分钟，但不会在滑块移动时重新计算

以下是修复它的一种方法：

<强> HTML：

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

<强> JS：

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
});

CSS可以保持不变：）

这是一个演示： fiddle

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

4 个答案: