Javascript 如何获取输入范围上的悬停时间值

我的问题可能有点模糊，所以我会在这里详细解释。我想在一个页面上开发一个简单的视频播放器。im使用输入范围显示文件持续时间和当前时间，就像任何标准播放器一样。这是我的剧本

<script>
        var vid, playbtn, seekslider, curtimeText, durtimeText, mutebtn, volumeslider, fullscreenbtn;
        function initializePlayer() {

            //creating global object
            vid = document.getElementById('my_video');
            playbtn = document.getElementById('playpausebtn');
            seekslider = document.getElementById('seekslider');
            curtimeText = document.getElementById('curtimeText');
            durtimeText = document.getElementById('durtimeText');
            mutebtn = document.getElementById('mutebtn');
            volumeslider = document.getElementById('volumeslider');
            fullscreenbtn = document.getElementById('fullscreenbtn');

            //creating event for objects
            playbtn.addEventListener("click", playPause, false);
            seekslider.addEventListener("change", vidSeek, false);
            vid.addEventListener("timeupdate", seektimeupdate, false);
            mutebtn.addEventListener("click", vidmute, false);
            volumeslider.addEventListener("change", setvolume, false);
            fullscreenbtn.addEventListener("click", toggleFullScreen, false);
        }

        window.onload = initializePlayer;

        function playPause() {
            if (vid.paused) {
                vid.play();
                playbtn.innerHTML = "Pause";
            } else {
                vid.pause();
                playbtn.innerHTML = "Play";
            }

        }
        function vidSeek() {
            var seekto = vid.duration * (seekslider.value / 100);
            vid.currentTime = seekto;
        }
        function seektimeupdate() {
            var nt = vid.currentTime * (100 / vid.duration);
            seekslider.value = nt;
            var curmins = Math.floor(vid.currentTime / 60);
            var cursecs = Math.floor(vid.currentTime - curmins * 60);
            var durmins = Math.floor(vid.duration / 60);
            var dursecs = Math.floor(vid.duration - durmins * 60);
            if (cursecs < 10) {
                cursecs = "0" + cursecs;
            }
            if (dursecs < 10) {
                dursecs = "0" + dursecs;
            }
            if (curmins < 10) {
                curmins = "0" + curmins;
            }
            if (durmins < 10) {
                durmins = "0" + durmins;
            }
            curtimeText.innerHTML = curmins + ":" + cursecs;
            durtimeText.innerHTML = durmins + ":" + dursecs;
        }
        function vidmute() {

            if (vid.muted) {
                vid.muted = false;
                mutebtn.innerHTML = "Mute";
            } else {
                vid.muted = true;
                mutebtn.innerHTML = "Unmute";
            }
        }
        function setvolume() {
            vid.volume = volumeslider.value / 100;
        }
        function toggleFullScreen() {
            if (vid.requestFullScreen) {
                vid.requestFullScreen();
            } else if (vid.webkitRequestFullScreen) {
                vid.webkitRequestFullScreen();
            } else if (vid.mozRequestFullScreen) {
                vid.mozRequestFullScreen();
            }
        }
</script>

var vid、playbtn、seekslider、curtimeText、durtimeText、mutebtn、volumeslider、fullscreenbtn；
函数initializePlayer（）{
//创建全局对象
vid=document.getElementById（“我的视频”）；
playbtn=document.getElementById（'playpausebtn'）；
seekslider=document.getElementById（'seekslider'）；
curtimeText=document.getElementById（'curtimeText'）；
durtimeText=document.getElementById（'durtimeText'）；
mutebtn=document.getElementById（'mutebtn'）；
volumeslider=document.getElementById（'volumeslider'）；
fullscreenbtn=document.getElementById（'fullscreenbtn'）；
//为对象创建事件
playbtn.addEventListener（“单击”，播放暂停，错误）；
seekslider.addEventListener（“更改”，vidSeek，false）；
参见addEventListener（“时间更新”，见时间更新，错误）；
mutebtn.addEventListener（“单击”，vidmute，false）；
volumeslider.addEventListener（“更改”，设置音量，错误）；
全屏BTN.addEventListener（“单击”，切换全屏，错误）；
}
window.onload=初始化图层；
函数playPause（）{
如果（参见暂停）{
视频播放（）；
playbtn.innerHTML=“暂停”；
}否则{
参阅暂停（）；
playbtn.innerHTML=“播放”；
}
}
函数vidSeek（）{
var seekto=vid.duration*（seekslider.value/100）；
vid.currentTime=seekto；
}
函数seektimeupdate（）{
var nt=视频当前时间*（100/视频持续时间）；
seekslider.value=nt；
var curmins=数学地板（参考当前时间/60）；
var cursecs=数学地板（参考当前时间-当前分钟*60）；
var durmins=数学地板（参考持续时间/60）；
var dursecs=数学地板（参见持续时间-durmins*60）；
if（cursecs<10）{
cursecs=“0”+cursecs；
}
如果（dursecs<10）{
dursecs=“0”+dursecs；
}
如果（电流小于10）{
curmins=“0”+curmins；
}
如果（杜明斯<10）{
杜明斯=“0”+杜明斯；
}
curtimeText.innerHTML=curmins+“：”+cursecs；
durtimeText.innerHTML=durmins+“：”+dursecs；
}
函数vidmute（）{
如果（视为静音）{
vid.muted=假；
mutebtn.innerHTML=“静音”；
}否则{
vid.muted=true；
mutebtn.innerHTML=“取消静音”；
}
}
函数setvolume（）{
vid.volume=volumeslider.value/100；
}
函数切换全屏（）{
如果（参见请求全屏）{
vid.requestFullScreen（）；
}else if（参见webkitRequestFullScreen）{
vid.webkitRequestFullScreen（）；
}else if（请参阅全屏）{
vid.mozRequestFullScreen（）；
}
}

和我的HTML代码：

<div id="Video_player_box">
    <video id="my_video">
        <source src="Videos/cowhand.mp4" type="video/mp4">
        <!-- Your browser does not support HTML5 video.-->
    </video>
    <div id="Video_controls_bar">
        <button id="playpausebtn">Play</button>             
        <span id="curtimeText"></span>
        <input id="seekslider" type="range" min="0" max="100" value="0" step="0.1"> 
        <span id="durtimeText"></span>
        <button id="mutebtn">Mute</button>
        <input id="volumeslider" type="range" min="0" max="100" value="50" step="1">
        <button id="fullscreenbtn">[&nbsp;&nbsp;]</button>
    </div> 
</div>

玩
哑巴
[  ]

---

现在我想做的是在一个小的工具提示上显示用户指向seekslider的位置的时间。比如，如果视频长度为10分钟，用户指向范围栏的中间（seekslider），我想要一个小的工具提示来显示用户指向的是5:01，但我真的不知道如何编码！如果您能提供有关如何实现此功能的任何帮助，我将不胜感激。

以下是一个简单的函数，它将帮助您实现此功能。它使用事件数据获取所有必要的数字，并根据滑块的

max

属性返回一个值

函数calcSliderPos（e）{
返回（e.clientX-e.target.offsetLeft）/e.target.clientWidth*parseFloat（e.target.getAttribute（'max'））；
}
//连接到滑块并在mousemove上点火
document.getElementById（'seekslider'）。addEventListener（'mousemove'，函数（e）{
//将该值注入时间跨度
document.getElementById（'durtimeText'）.innerHTML=calcSliderPos（e）.toFixed（2）；
});

借助于我自己的一些实验，我更进一步，找到了让工具提示跟随鼠标的代码

对于您的代码，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>

最后是好东西：JavaScript。现在，尽管您将这个问题标记为jQuery，但我注意到您的原始代码没有包含任何内容，所以我选择跟随您的做法，在这个答案中不使用jQuery。这当然是可行的（可能会容易一点），但我希望这与您已经拥有的尽可能一致

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


在开始时向列表中添加了另一个变量：
tooltip
将
seek tooltip
元素存储到该
tooltip
变量中
将一个
mousemove
事件侦听器添加到调用函数
sliderTooltip
编写函数
sliderTooltip
，计算当前悬停的时间（感谢Jesse），将工具提示的内容设置为时间，将
#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;
}

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";

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