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

Question

您知道 YouTube 上的那件事，当您将鼠标悬停在搜索 slider 的特定部分时，它会显示您悬停的时间码。我想获取该值并将其显示在该 slider 的标题属性中。我该怎么做？

<input type="range" min="0" max="100" step="1" title="javascript:hoverTimeFunction()"/>

这是我需要的: 您会看到，该视频的当前时间是 2:04，但我将鼠标悬停在 3:27 时间码上，它显示了 3:27标题中的值，无需拖动拇指。但问题是我需要显示视频时间，而不仅仅是 slider 值。我正在使用这个函数:

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 的解决方案。

Answer 1

这是一个纯 javascript + css 解决方案。只有一个问题:除非您将 slider 调大，否则显示的数字将不是单击时在 slider 上设置的实际值。这是因为鼠标所在的坐标与 slider 在该位置设置的值不对应。

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>