Question

我知道也有类似的问题，但对于我当前的问题似乎没有什么用。我有一个带有进度条的简单音频播放器：

$(document).ready(function() {
  $(".audio-clip .volume").on("input", function() {
    var audio = $(this)
      .closest("div")
      .find("audio")[0];
    audio.volume = this.value;
  });

  $(".audio-clip .position").on("input", function() {
    var audio = $(this)
      .closest("div")
      .find("audio")[0];
    audio.currentTime = (audio.duration / 100) * this.value;
  });

  $("audio").on("timeupdate", function() {
    var pc = (audio.currentTime / audio.duration) * 100;
    $(this)
      .closest("div")
      .find(".position")
      .val(pc);
  });

和html

   <label>
    Position:
    <input type="range" class="position" min="0" max="100" step="1" value="0" />

    <progress class="nes-progress is-pattern position" value="0" max="100"></progress>
  </label>

一切正常，但是在JS控制台中，我看到了

Uncaught TypeError: Failed to set the 'value' property on 'HTMLProgressElement': The provided double value is non-finite

Answer 1

在尝试使用pc设置值之前，请确保它是有效数字。

  $("audio").on("timeupdate", function() {
    var pc = (audio.currentTime / audio.duration) * 100;
    if (isNaN(pc)) {
      return;
    }
    $(this)
      .closest("div")
      .find(".position")
      .val(pc);
  });

jQuery：未捕获的TypeError：无法在“ HTMLProgressElement”上设置“ value”属性：提供的双精度值是非限定的

1 个答案: