如何在点击时显示 0:00 而不是 NaN:NaN答案

【问题标题】：How to display 0:00 instead of NaN:NaN on click如何在点击时显示 0:00 而不是 NaN:NaN
【发布时间】：2020-07-15 03:31:51
【问题描述】：

我有一个带有播放列表的音频播放器，但是当我单击新曲目时，它会短暂显示 NaN:NaN，在此我有持续时间，直到我加载曲目。这是我拥有的，但它不起作用。

audioPlayer.addEventListener("timeupdate", function() {
    var curmins = Math.floor(audioPlayer.currentTime / 60);
    var cursecs = Math.floor(audioPlayer.currentTime - curmins * 60);

    var durmins = Math.floor(audioPlayer.duration / 60);
    var dursecs = Math.floor(audioPlayer.duration - durmins * 60);
       if(cursecs < 10){ cursecs = "0"+cursecs; }
       if(dursecs < 10){ dursecs = "0"+dursecs; }
     
      
      if (durmins !== 'NaN') {
        $('#duration').text(durmins+":"+dursecs);
        $('#current-time').text(curmins+":"+cursecs);
      }
 })

【问题讨论】：

标签： javascript html jquery audio

【解决方案1】：

使用isNaN。

if (isNaN(durmins)) {

您还可以使用NaN 是唯一不等于自身的对象的属性。

if(durmins !== durmins) {

【讨论】：

@caseym 没问题。

【解决方案2】：

(durmins !== 'NaN')

条件检查根本不起作用，原因如下：

JavaScript 中的number 类型实际上是遵循 IEEE754 规范的浮点数。运行时会得到false

NaN == NaN

或

NaN === NaN

由于在 IEEE754 规范下，NaN(Not a Number) 是一个特殊的内置值，任何与 NaN 相比的数字（包括 NaN 本身）都应该为 false。

检查数字是否为 NaN 的唯一方法是使用函数 isNaN(value)

有关 ieee754 的更多信息，请参阅https://en.wikipedia.org/wiki/IEEE_754

【讨论】：

【解决方案3】：

我会将整个计算包装在 if 块中，并且仅当属性存在时 - 执行计算 - 否则在持续时间和当前时间显示“0:00”

audioPlayer.addEventListener("timeupdate", function() {
  if(audioPlayer.duration) {
    var curmins = Math.floor(audioPlayer.currentTime / 60);
    var cursecs = Math.floor(audioPlayer.currentTime - curmins * 60);

    var durmins = Math.floor(audioPlayer.duration / 60);
    var dursecs = Math.floor(audioPlayer.duration - durmins * 60);
       if(cursecs < 10){ cursecs = "0"+cursecs; }
       if(dursecs < 10){ dursecs = "0"+dursecs; }
     
    $('#duration').text(durmins+":"+dursecs);
    $('#current-time').text(curmins+":"+cursecs);
  } else {
     $('#duration').text("0:00");
    $('#current-time').text("0:00");
  }
}

您还可以在开始时将持续时间和当前时间变量设置为“0:00”，如果属性存在则更新变量。如果 tghe 属性不存在 - 那么变量的原始值将被传递给文本元素。

audioPlayer.addEventListener("timeupdate", function() {
  var duration = "0:00";
  var currentTime = "0:00";

  if(audioPlayer.duration) {
    var curmins = Math.floor(audioPlayer.currentTime / 60);
    var cursecs = Math.floor(audioPlayer.currentTime - curmins * 60);

    var durmins = Math.floor(audioPlayer.duration / 60);
    var dursecs = Math.floor(audioPlayer.duration - durmins * 60);
       if(cursecs < 10){ cursecs = "0"+cursecs; }
       if(dursecs < 10){ dursecs = "0"+dursecs; }
     
    duration = durmins + ":" + dursecs;
    currentTime = curmins + ":" + cursecs;
  }
  $('#duration').text(duration);
  $('#current-time').text(currentTime);
}

【讨论】：

【解决方案4】：

使用 if (durmins) 代替 if (durmins !== 'NaN')

NaN 表示未定义的变量。它不是一个字符串。 if (durmins) 将检查变量是否已定义并运行代码。

【讨论】：