Question

所以这就是我通过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页面，它是我正在制作的这个游戏的所有可能变量的总列表。

我正在寻找的是能够为每个变量分配一个圆圈，实时/快速更新变量值来自globalvars.js。

我读到这可能是通过在div中包含一个id来实现的 <div class="circle" id=XXXXX></div> 然而，我无法完成这项工作，并想知道这只是我是愚蠢还是其他什么。我对编程比较陌生，所以对任何建设性的批评都表示赞赏！

Answer 1

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

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

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

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

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

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

Answer 2

创建功能更新。使用该函数内的document.getElementById("elementID").innerHTML = variable更新属性。我更喜欢使用setTimeout而不是setInterval，因为它允许用户互动以及中间用户互动。

持续更新js变量的html显示

2 个答案: