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

时间:2018-01-31 11:36:22

标签: javascript jquery html css slider

我试图分别以小时和分钟显示滑块的值。我对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>

4 个答案:

答案 0 :(得分:1)

$("#minutes")

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

$("#minutes")[0]

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

然后在滑块中添加onchange事件以启用实时更新。

&#13;
&#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;
&#13;
&#13;

答案 1 :(得分:0)

替换为以下

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

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

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

答案 2 :(得分:0)

您正在将jqueryjs混合

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

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

  

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

答案 3 :(得分:0)

你遗漏了几件事:

  • 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