我试图分别以小时和分钟显示滑块的值。我对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>
答案 0 :(得分:1)
$("#minutes")
将返回一个数组。所以你必须像以下一样访问它:
$("#minutes")[0]
将返回第一个元素。见this explanation for more
然后在滑块中添加onchange
事件以启用实时更新。
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;
答案 1 :(得分:0)
替换为以下
var minuteOutput = $("#minutes")[0];
var hourOutput = $("#hours")[0];
$("#minutes")
将返回第一个项目为元素的数组。
因此,$("#minutes")[0]
将返回您可以更改内部HTML的元素。
答案 2 :(得分:0)
您正在将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)
。
答案 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