safari 浏览器中的大量计数显示 NaN

Question

我在 Vanilla JS 中创建了一个计数函数。一切正常。当您向下滚动到它时，计数器就会启动。不幸的是，大数字 35 000 000 在 iOS Safari 浏览器中显示为 NaN。我不知道为什么。请帮忙。看起来大数字在 iOS Safari 浏览器中不起作用。

var animationDuration = 3000;
var frameDuration = 1000 / 60;
var totalFrames = Math.round(animationDuration / frameDuration);
var easeOutQuad = t => t * (2 - t);
var animateCountUp = el => {
  let frame = 0;
  var countTo = parseInt(el.innerHTML.replace(/ /g, ''), 10);
  var counter = setInterval(() => {
    frame++;
    var progress = easeOutQuad(frame / totalFrames);
    var currentCount = Math.round(countTo * progress);
    if (parseInt(el.innerHTML, 10) !== currentCount) {
      el.textContent = currentCount.toLocaleString().replace(/,/g, ' ');
    }
    if (frame === totalFrames) {
      clearInterval(counter);
    }
  }, frameDuration);
};
var count = document.querySelectorAll('.countup'),
  once = 1;
document.addEventListener('scroll', function() {
  if (once == 1 && count[0].getBoundingClientRect().top < window.innerHeight) {
    once = 0;
    count.forEach(animateCountUp);
  }
});

<div style="position: fixed">
    <span class="countup">12 500</span>
    <span class="countup">35 000 000</span>
</div>
<div style="height: 5000px"></div>

Answer 1

为什么不使用counto 而不是使用DOM 作为存储来存储要计数的数字？

正如 TJ 所说，问题在于 Safari 在使用 innerHTML 而不是 textContent 时处理您的号码

if (currentCount<=countTo) {
  el.textContent = currentCount.toLocaleString().replace(/,/g, ' ');
}

在 iOS 14.4 上测试

https://plungjan.name/SO/tl.html

var animationDuration = 3000;
var frameDuration = 1000 / 60;
var totalFrames = Math.round(animationDuration / frameDuration);
var easeOutQuad = t => t * (2 - t);
var animateCountUp = el => {
  let frame = 0;
  var countTo = parseInt(el.textContent.replace(/ /g, ''), 10); // do not use innerHTML here
  var counter = setInterval(() => {
    frame++;
    var progress = easeOutQuad(frame / totalFrames);
    var currentCount = Math.round(countTo * progress);
    if (currentCount<=countTo) {
      el.textContent = currentCount.toLocaleString().replace(/,/g, ' ');
    }
    if (frame === totalFrames) {
      clearInterval(counter);
    }
  }, frameDuration);
};
var count = document.querySelectorAll('.countup'),
  once = 1;
document.addEventListener('scroll', function() {
  if (once == 1 && count[0].getBoundingClientRect().top < window.innerHeight) {
    once = 0;
    count.forEach(animateCountUp);
  }
});

<div style="position: fixed">
    <span class="countup">12 500</span>
    <span class="countup">35 000 000</span>
</div>
<div style="height: 5000px"></div>

Answer 2

为此使用innerHTML 不太理想，实际上iOS Safari 正在为您的大量数字添加标记，这会影响您的代码。它将其识别为电话号码并将该元素的内部 HTML 更改为：<a href="tel:35 000 000">35 000 000</a>。这非常令人惊讶，但您可以在这里看到：

console.log(document.querySelector(".countup").innerHTML);

<span class="countup">35 000 000</span>

注意：据我所知仅适用于 iOS Safari。

使用textContent 代替有效，因为文本没有改变：

var animationDuration = 3000;
var frameDuration = 1000 / 60;
var totalFrames = Math.round(animationDuration / frameDuration);
var easeOutQuad = t => t * (2 - t);
var animateCountUp = el => {
  let frame = 0;
  var countTo = parseInt(el.textContent.replace(/ /g, ''), 10);
  var counter = setInterval(() => {
    frame++;
    var progress = easeOutQuad(frame / totalFrames);
    var currentCount = Math.round(countTo * progress);
    if (parseInt(el.textContent, 10) !== currentCount) {
      el.textContent = currentCount.toLocaleString().replace(/,/g, ' ');
    }
    if (frame === totalFrames) {
      clearInterval(counter);
    }
  }, frameDuration);
};
var count = document.querySelectorAll('.countup'),
  once = 1;
document.addEventListener('scroll', function() {
  if (once == 1 && count[0].getBoundingClientRect().top < window.innerHeight) {
    once = 0;
    count.forEach(animateCountUp);
  }
});

<div style="position: fixed">
    <span class="countup">12 500</span>
    <span class="countup">35 000 000</span>
</div>
<div style="height: 5000px"></div>

您也可以通过添加meta 标记为described in this question's answers 来告诉iOS Safari 不要这样做：

<meta name="format-detection" content="telephone=no">

但据我所知，这会在页面范围内禁用它。