javascript - 为什么此 HTML 范围栏的值大于 1，而其最大值设置为 1？

Question

我将 HTML 范围输入设置为 HTML5 视频播放器的搜索栏，如下所示:

<input type="range" id="seek-bar" value="0" min="0" max="1" step="0.001">

我的目的是让范围值介于 0 和 1 之间，这样 slider 的值(例如 0.5)乘以视频的长度(例如 5000)，就会在以下情况下输出视频中的正确位置:用户滑动 handle (例如，0.5 * 5000 = 2500)。

但是，这个范围输入的值输出的值要大得多，我无法解释。 (例如 20,000)。

处理输入的代码片段:

var $video = $("#fullscreen");
var video = $video.get(0);

// Pause the video when the slider handle is being dragged
seekBar.on("mousedown", function() {
    video.pause();
});

// Play the video when the slider handle is dropped
seekBar.on("mouseup", function() {
    // Calculate the new time
    var time = video.duration * seekBar.value;
    console.log("Video duration: " + video.duration);
    console.log("Seekbar value: " + seekBar.value);
    console.log("Seeked time: " + time);
    console.log("Seek Max:" + document.getElementById("seek-bar").max);
    video.currentTime(time);
    video.play();
});

预期输出:

Video duration: 5871.146667
Seekbar value: 0.5
Seeked time: 2935
Seek Max:1 

实际输出:

Video duration: 5871.146667
Seekbar value: 3.9127773334503213 
Seeked time: 22972.4896
Seek Max:1 

为什么此 HTML 范围栏的值大于 1，而其最大值设置为 1？

Answer 1

如果没有 fiddle ，很难说。什么是seekBar？您调用 seekBar.on() 所以我假设它是一个 jQuery 对象。但随后您使用的是 seekBar.value，它对于 jQuery 对象没有任何意义。

如果它实际上是一个 jQuery 对象，则创建如下:

var seekBar = $('input#seek-bar');

然后您应该能够使用 seekBar.val() 来获取该值。

此外，您还使用

document.getElementById("seek-bar").max

最好将其写为seekBar[0].max，因为您已经费尽心思遍历 DOM 来找到您的搜索栏。