持续更新 JS 变量的 HTML 显示

continual update html display of js variable

本文关键字：HTML 显示 变量 JS 更新      更新时间：2023-09-26

所以这是我通过HTML获得的

<div class="circle" >2000</div>
<div class="circle" >20</div>

这是 CSS

.circle {
   width:50px;
   height:50px;
   border:3px solid green;
   border-radius:250px;
   line-height:50px;
   text-align:center;
   display:inline-block;
}

我有一个.js页面，它是我正在制作的这个游戏的所有可能变量的总列表。

我正在寻找的是能够为每个变量分配一个圆圈，其中包含来自全局变量.js的变量值的实时/快速更新视图。

我读到可以通过在div 中包含这样的 id 来做到这一点 <div class="circle" id=XXXXX></div>但是我无法完成这项工作，并想知道这是否只是我愚蠢还是其他原因。我对编程相对较新，因此欢迎任何和所有建设性的批评！

您可以使用 AngularJS 表达式轻松完成此操作。但是，假设您不了解AngularJS，这里有一个简单的JS示例：

是的，您可以像class一样向<div>添加id。

<div id="display"></div>

现在，每次变量更新时，您都可以通过使用 JS 选择它并更改其 innerHTML 属性来更新<div>的值：

document.getElementById("display").innerHTML = var_name;

例如，您可以在 JSFiddle 上查看此简单示例，以查看其工作原理的示例。

创建函数更新。 使用该函数中的document.getElementById("elementID").innerHTML = variable更新属性。我更喜欢使用 setTimeout 而不是 setInterval，因为它也允许用户在两者之间进行交互。

相关文章：