javascript - 在以 HTML 运行的 Javascript 中循环变慢超时并最终崩溃

Question

我真的是 Javascipt 和 HTML 的新手，我只想创建一个数字的更新显示。我目前正在使用 Weebly 托管网站/运行此代码，但我希望随着这些语言的使用变得更好而改变这一点。我目前遇到的问题是，当我直接在我的计算机上运行代码时，它似乎运行良好，除了代码会随着时间的推移而变慢。当我在 Weebly 中运行它时，在我的计算机上它会强制将毫秒一词改为较小的字体，否则可以正常工作。在 Safari 中的 Iphone 上，我看到 this (我将颜色更改为红色的原因是因为我最终想将它设置为黑色，因为在 iPhone 上它显示为灰色而我不希望那样)最终红色文本消失并且灰色文本不更新.

这是代码的相关部分

  var target = 1578135600000
  var rightnow = 1578135600000 - currdate.getTime()
  var rightnowstr = "(" + rightnow + " milliseconds)"
  var rightnowstr = rightnowstr.fontcolor("black")
  document.write(rightnowstr.fontsize(30))
  document.write("<br>")
  var substring = "until Columbia Invy"
  document.write(substring.fontsize(30))
  var rightnow2
  setInterval(function(){


    currdate = new Date()

    rightnow2 = String(1578135600000 - currdate.getTime())
    rightnow2 = rightnow2.fontcolor("red")
    document.body.innerHTML = document.body.innerHTML.replace(rightnow, rightnow2)
    rightnow = 1578135600000 - currdate.getTime()

   // document.body.innerHTML = document.body.innerHTML.replace(rightnow, rightnow = 1578135600000 - currdate.getTime())

   },1);

我也有一个版本的代码在电脑上运行完美，但在 Iphone 上，毫秒数是灰色的，不会更新。

  var target = 1578135600000
  var rightnow = 1578135600000 - currdate.getTime()
  var rightnowstr = "(" + rightnow + " milliseconds)"
  var rightnowstr = rightnowstr.fontcolor("black")
  document.write(rightnowstr.fontsize(30))
  document.write("<br>")
  var substring = "until Columbia Invy"
  document.write(substring.fontsize(30))
  var rightnow2
  setInterval(function(){


    currdate = new Date()

    document.body.innerHTML = document.body.innerHTML.replace(rightnow, rightnow = 1578135600000 - currdate.getTime())

  },1);

无论哪种方式，我只想要在 Iphone(在 Safari 上)和 Chrome 上都显示黑色文本并持续更新毫秒数的东西。

Answer 1

不要使用 document.write 这很少是最佳实践。在您的页面上设置一些合理的 HTML，并且只更新需要它的元素。最后使用一个合理的数字进行刷新。

/* javascript to manipulate the DOM */
var target = 1578135600000
//Get the element that will hold the milliseconds
var countdownElement = document.getElementById("invCountdown");

  setInterval(function(){
    //Date Stuff
    currdate = new Date();    
    rightnow2 = String(target - currdate.getTime());
    //Set the style of the millisecond element
    countdownElement.style.color = "red";
    //Update the content of the millisecond element.
    countdownElement.innerHTML = rightnow2;   
   },16);

/*CSS to style the div with class inv*/
.inv {font-size:30px; color:#000;}

<!-- HTML -->
<!-- Generic block element to hold our content, with a class so we can style it -->
<div class="inv">
<!-- Generic inline element with an id so we can manipulate it easily with javascript -->
  (<span id="invCountdown">1578135600000</span>) milliseconds<br> until Columbia Invy 
</div>