在输入范围上悬停时显示时间
问题描述:
当您将鼠标悬停在搜索滑块的某个部分上时,它会向您显示您在其上徘徊的时间码。我想抓住该值并将其显示在此滑块的标题属性中。我该怎么做?在输入范围上悬停时显示时间
<input type="range" min="0" max="100" step="1" title="javascript:hoverTimeFunction()"/>
这就是我需要: 你看,那个视频的当前时间是2:04 但我徘徊在 3:27时间码,它显示了我 3:27标题中的值不拖动拇指。但问题是我需要显示视频时间,而不仅仅是滑块值。我正在使用这个功能:
seekSlider = document.getElementById("seekSlider");
function videoTimeUpdate(){
"use strict";
var timeInterval = vid.currentTime * (100/vid.duration);
seekSlider.value = timeInterval;
var currentMinutes = Math.floor(vid.currentTime/60);
var currentSeconds = Math.floor(vid.currentTime - currentMinutes * 60);
var durationMinutes = Math.floor(vid.duration/60);
var durationSeconds = Math.floor(vid.duration - durationMinutes * 60);
if(currentSeconds < 10) {currentSeconds = "0"+ currentSeconds;}
if(durationSeconds < 10) {durationSeconds = "0"+ durationSeconds;}
if(currentMinutes < 10) {currentMinutes = "0"+ currentMinutes;}
if(durationMinutes < 10) {durationMinutes = "0"+ durationMinutes;}
currentTime.innerHTML = currentMinutes + ":" + currentSeconds;
vidDuration.innerHTML = durationMinutes + ":" + durationSeconds;
}
顺便说一下,我需要一个解决方案,而不使用jQuery。
答
这里有一个纯JavaScript + CSS的解决方案。只有一个问题:除非您将滑块放大,否则显示的数字将不是它将在滑块上设置的实际值(如果单击)。这是因为鼠标所在的坐标不符合滑块在该位置设置的值。
var slider = document.getElementById("slider");
var slidertitle = document.getElementById("slidertitle");
var sliderOffsetX = slider.getBoundingClientRect().left - document.documentElement.getBoundingClientRect().left;
var sliderOffsetY = slider.getBoundingClientRect().top - document.documentElement.getBoundingClientRect().top;
var sliderWidth = slider.offsetWidth - 1;
slider.addEventListener('mousemove', function(event) {
var currentMouseXPos = (event.clientX + window.pageXOffset) - sliderOffsetX;
var sliderValAtPos = Math.round(currentMouseXPos/sliderWidth * 100 + 1);
// this...
if(sliderValAtPos < 0) sliderValAtPos = 0;
// ... and this are to make it easier to hover on the "0" and "100" positions
if(sliderValAtPos > 100) sliderValAtPos = 100;
slidertitle.innerHTML = sliderValAtPos;
slidertitle.style.top = sliderOffsetY - 15 + 'px';
slidertitle.style.left = currentMouseXPos + 'px';
});
#slider {
margin-top: 10px;
}
#slidertitle {
display: none;
position: absolute;
cursor: default;
top: 0;
left: 0;
}
#container:hover > #slidertitle {
display: block;
}
<div id="container">
<input type="range" min="0" max="100" step="1" id="slider"/>
<span id="slidertitle"></span>
</div>
答
收听滑块上的input
事件以更改标题属性。
下面是一个例子。
var slider = document.querySelector('input[type="range"]');
// set the initial value
slider.title = slider.value;
// add listener to input event
slider.addEventListener('input', function(e) {
\t e.target.title = e.target.value;
})
<input type="range" min="0" max="100" step="1" title="" />
+0
更新的问题。 –
请阅读我的编辑,这很重要。 – nonzaprej
哦,快点。这太遗憾了。但无论如何,谁在乎?我只是让视频播放器看起来更酷。 –
我认为我有一个丑陋的解决方案来始终显示正确的价值,但我现在无法尝试。 – nonzaprej