如何在输入范围内获得悬停时间的值

这里有一个简单的函数，它应该会让你走上正轨。它使用事件数据来获取所有必要的数字，并根据滑块的max属性返回一个值。

function calcSliderPos(e) {
  return ( e.clientX - e.target.offsetLeft ) / e.target.clientWidth * parseFloat(e.target.getAttribute('max'));
}
//attach to slider and fire on mousemove
document.getElementById('seekslider').addEventListener('mousemove', function(e) {
  //inject the value into the durtime span
  document.getElementById('durtimeText').innerHTML = calcSliderPos(e).toFixed(2);
});

<input id="seekslider" type="range" min="0" max="100" value="0" step="0.1"> 
<span id="durtimeText"></span>
        

请注意，这只会给你一个估计的位置。我相信，真正获得100%准确位置的唯一方法是在滑块上选择一个点并获取该值。

根据Jesse的回答、本页和我自己的一些实验，我更进一步，找到了让鼠标跟随工具提示的代码。

我为您的代码创建了一个Codepen，Ali，并添加了一个处理工具提示的函数。你可以在那里查看完整的代码，但我在你的原始代码中添加了以下内容：

在HTML中，我将seekslider封装在一个容器中，并为工具提示添加了一个span，如下所示：

<div id="seek-container">
    <input id="seekslider" type="range" min="0" max="100" value="0" step="0.1" /><span id="seek-tooltip"></span>
</div>

然后，使用CSS，I:

• 确保seek-container将像滑块通常那样保持在线
• 将seek-tooltip的位置设置为绝对位置，或相对于文档的位置(稍后您将了解原因(，将其设置为初始不可见，并为其提供一个漂亮的阴影，以备不时之需
• 当seek-container悬停在上方时，使seek-tooltip在白色背景下可见

这就是实现这一切的代码：

#seek-container {
    display: inline;
}
#seek-tooltip {
    position: absolute;
    display: none;
    box-shadow: 5px 5px 8px #CCC;
}
#seek-container:hover #seek-tooltip {
    display: inline;
    background: #fff;
}

最后，好东西：JavaScript。现在，尽管您标记了这个问题jQuery，但我注意到您的原始代码中没有任何jQuery，所以我选择效仿您的做法，在这个答案中不使用jQuery。这当然是可行的(可能会简单一点(，但我希望这与你已经拥有的尽可能一致。

不管怎样，我是这么做的：

• 在列表的开头添加了另一个变量：tooltip
• 将seek-tooltip元素存储到该tooltip变量中
• 向调用函数sliderTooltip的seekslider添加了一个mousemove事件侦听器
• 编写函数sliderTooltip，计算当前悬停的时间(感谢Jesse(，将工具提示的内容设置为时间，将工具工具提示的顶部位置设置为滑块的顶部位置，并将工具提示左侧位置设置为鼠标的左侧位置。这就是为什么工具提示的位置被设置为绝对：我使用滑块的offsetTop属性来确定必要的y坐标和pageX属性来获取鼠标的x坐标，这两个属性都是相对于文档的；使工具提示处于绝对位置可以确保工具提示和鼠标使用相同的坐标

这是代码：

var tooltip; //This would be at the beginning with your other definitions
//--The stuff below would be inside your window.onload function--
//Populate your tooltip variable
tooltip = document.getElementById("seek-tooltip");
 //Bind the tooltip update function to the slider's mousemove event
seekslider.addEventListener("mousemove", sliderTooltip, false);
//--Done with the stuff in your window.onload--
function sliderTooltip(e) { 
    //The parameter e is the mousemove event that was fired
    //First, calculate the current hovered time (thanks Jesse)
    var hoverTime = ((e.clientX - e.target.offsetLeft) / e.target.clientWidth * parseFloat(e.target.getAttribute('max'))).toFixed(2);
    var hoverMins = Math.floor(hoverTime / 60);
    var hoverSecs = Math.floor(hoverTime - hoverMins * 60);
    //Now that we've got the time, simply populate the tooltip!
    tooltip.innerHTML = hoverMins + ":" + hoverSecs;
    //Set the "top" CSS to the top position of the slider
    tooltip.style.top = seekslider.offsetTop + "px";
    //Set the "left" CSS to our mouse position, plus 10 pixels
    //to offset it a bit to allow the user to click on the slider and not on the tooltip
    tooltip.style.left = (e.pageX + 10) + "px";

}}

如果你想知道jQuery版本会是什么样子，除了选择工具提示和添加其事件侦听器的方式外，它几乎完全相同。

我尝试过jming的答案，但对我来说，提供的值完全错误。经过如下修改，我的问题得到了解决。

var hoverTime = (e.offsetX / e.target.clientWidth) * parseInt(e.target.getAttribute('max'),10);

这提供了滑块内更精确的时间值。

感谢jming出色的工作。

嗨，我正在处理当前Time项目的工具提示，我得到了一个我自己制作的脚本，它实际上非常棒——它是我为这个项目看到的所有代码的混合体

 var video = $('video')[0];
 $('input').mousemove(function(e){
        var progress = $("input");
        var maxduration = video.duration;
        var position = e.pageX - progress.offset().left;
        var tooltip = $("span")[0];
        var percentage = 100 * position / progress.width();
        if (percentage > 100) {
            percentage = 100;
        }
        if (percentage < 0) {
            percentage = 0;
        }
        var min = Math.floor((percentage / 100 * video.duration) / 60);
        var sec = Math.floor((percentage / 100 * video.duration) - min * 60); 
        if(min < 10){
            min = "0" + min;
        }
        if(sec < 10){
            sec = "0" + sec;
        }
        $("span").html(min + ":" + sec); 
  //You can use this code below to align your tooltip when you have completed styling it
  /*tooltip.style.top = -progress[0].offsetTop+(-10) + "px";
         console.log(progress.offset().top);
         tooltip.style.marginLeft = (e.pageX - 25) + "px";
  //Note: You may have to edit this code according to your styling
*/
});
//Just for testing
var timeDrag = false;
$('input').on('mousedown', function(e) {
        timeDrag = true;
        video.pause();
        updatebar(e.pageX);
 });
   var updatebar = function(x) {
        var progress = $('input');
        //calculate drag position
        //and update video currenttime
        //as well as progress bar
        var maxduration = video.duration;
        var position = x - progress.offset().left;
        var percentage = 100 * position / progress.width();
        if (percentage > 100) {
            percentage = 100;
        }
        if (percentage < 0) {
            percentage = 0;
        }
        video.currentTime = maxduration * percentage / 100;
    };
 

input{
  width:400px; /*Just for demonstration that this code does not depend on width of the slider*/
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<video src="https://givemesomething.000webhostapp.com/video.mp4" height="280" width="100%" controls></video> 
<input type="range" min="0" max="100" value="0">
<span></span>

这就是它将工作的全部肯定工作感谢