在输入范围上悬停时显示时间

当您将鼠标悬停在搜索滑块的某个部分上时，它会向您显示您在其上徘徊的时间码。我想抓住该值并将其显示在此滑块的标题属性中。我该怎么做？在输入范围上悬停时显示时间

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

来源

2017-05-09 Eugen Eray

这里有一个纯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>

来源

2017-05-09 08:37:49 nonzaprej

请阅读我的编辑，这很重要。 – nonzaprej

哦，快点。这太遗憾了。但无论如何，谁在乎？我只是让视频播放器看起来更酷。 –

我认为我有一个丑陋的解决方案来始终显示正确的价值，但我现在无法尝试。 – nonzaprej

收听滑块上的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="" />

来源

2017-05-09 07:26:19 DavidDomain

更新的问题。 –

在输入范围上悬停时显示时间

回答

相关问题