Javascript 循环超时减慢，最终在HTML中运行的Javascipt中崩溃

我对Javascipt和HTML非常陌生，我只想创建一个数字的更新显示。我目前正在用Weebly托管网站/运行此代码，但我希望随着我对这些语言的掌握程度的提高而改变这一点。我现在遇到的问题是，当我直接在我的计算机上运行代码时，它似乎运行得很好，只是代码会随着时间的推移而变慢。当我在Weebly中运行它时，它会在我的计算机上强制将单词毫秒改为较小的字体，否则会正常工作。在safari中的Iphone上，我看到（我之所以将颜色更改为红色，是因为我最终想将其设置为黑色，因为在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);

下面是代码的相关部分

  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);

var目标=1578135600000
var rightnow=1578135600000-currdate.getTime（）
var rightnowstr=“（“+rightnow+”毫秒）”
var rightnowstr=rightnowstr.fontcolor（“黑色”）
文件写入（rightnowstr.fontsize（30））
文档。写入（“
”）
var substring=“直到哥伦比亚投资”
文件写入（子字符串fontsize（30））
var rightnow2
setInterval（函数（）{
currdate=新日期（）
rightnow2=字符串（1578135600000-currdate.getTime（））
rightnow2=rightnow2.fontcolor（“红色”）
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);

var目标=1578135600000
var rightnow=1578135600000-currdate.getTime（）
var rightnowstr=“（“+rightnow+”毫秒）”
var rightnowstr=rightnowstr.fontcolor（“黑色”）
文件写入（rightnowstr.fontsize（30））
文档。写入（“
”）
var substring=“直到哥伦比亚投资”
文件写入（子字符串fontsize（30））
var rightnow2
setInterval（函数（）{
currdate=新日期（）
document.body.innerHTML=document.body.innerHTML.replace（rightnow，rightnow=1578135600000-currdate.getTime（））
},1);

---

不管是哪种方式，我只想在Iphone（Safari）和Chrome上显示黑色文本，并持续更新毫秒数。

不要使用

文档。编写
这很少是最佳做法。在页面上设置一些合理的HTML，只更新需要它的元素。最后，为刷新使用一个合理的数字


/*操作DOM的javascript*/
var目标=1578135600000
//获取将保存毫秒的元素
var countdownElement=document.getElementById（“invCountdown”）；
setInterval（函数（）{
//约会用品
currdate=新日期（）；
rightnow2=String（target-currdate.getTime（））；
//设置毫秒元素的样式
countdownElement.style.color=“红色”；
//更新毫秒元素的内容。
countdownElement.innerHTML=rightnow2；
},16);
/*使用类inv设置div样式的CSS*/
.inv{字体大小：30px；颜色：#000；}

（1578135600000）毫秒
直到哥伦比亚投资公司
每毫秒运行一次函数会很快占用浏览器内存。重绘也很昂贵，每次更新DOM时都会发生这种情况。用一个更合理的周期（比如100毫秒）来尝试你的代码，然后调试它。然后缩短时间，直到你开始出现问题。另请参见：快速更新DOM是违反直觉且成本高昂的。您是否尝试过将毫秒数更改为更高的值，例如16毫秒？这将为您提供60FPS的更新，这是人眼可以感知的最高帧速率。我已经放慢了速度，事实上，在我上传到Weebly的所有版本中，我都使用了337ms这样的间隔（只是为了让最后一个数字不断变化）。我不认为减速错误主要是由这个更新率引起的，因为它只出现在代码的某些版本上，即使在1msSee上，如果这是非常具体的话。尝试将javascript上传到JSFIDLE或Codepen之类的地方，看看是否会遇到同样的问题。制作一个常规的ol样式元素而不是
fontcolor
？来自MDN:String.prototype.fontcolor（）不推荐使用此功能。尽管某些浏览器可能仍然支持它，但它可能已经从相关的web标准中删除，可能正在被删除，或者可能仅出于兼容性目的而保留。避免使用，并尽可能更新现有代码；请参阅本页底部的兼容性表以指导您的决策。请注意，此功能可能随时停止工作。从我在“运行代码片段”中看到的情况来看，它似乎可以完美地工作，但由于我对这一切都很陌生，我不知道如何使用或格式化。在或中，我不知道如何搜索以查找有关这些功能的信息。目前，我的整个文档看起来是这样的：我不知道要做什么。inv实际上修改了文本，而不仅仅是显示
。inv
是一个CSS类，所以请查找一些CSS教程。CSS不用于修改内容，而是用于设置内容的样式。Javascript用于修改内容。CSS是您应该用来设置HTML文档样式的工具。大致上，HTML描述了一个文档。浏览器使用它来创建文档对象模型（DOM）。浏览器使用CSS来设置DOM的样式，浏览器使用javascript来操作DOM。非常感谢。我不完全理解所有的元素部分，但我能够理解类和格式是如何工作的。我在Weebly试过了