Question

在我学习Unity之前，我希望能够根据自己的知识创建一个简单的Javascript游戏。所以，我开始尝试一个计时器，它工作。然后我想在我的HTML文档中添加一个div元素，并根据计时器更改其文本。所以我写了这段代码：

var counter = 0;
var seconds = 0;

$(document).ready(function(e) {
  var element = document.createElement("div");
  element.id = "text2";
  document.getElementById("canvas").appendChild(element);

  function gameActions() {
    document.getElementById("canvas").innerHTML = seconds;
    if (seconds == 1) document.getElementById("text2").innerHTML = "second";
    else document.getElementById("text2").innerHTML = "seconds";

    counter++;

    if (counter % 50 == 0) {
      seconds++;
    }

  }

  setInterval(gameActions, 20);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="canvas" class="imgcenter" style="width: 500px; height: 400px; background-color: #eeffee;">

</div>

基本上我打算更改“父”div的文本，该文本显示html页面完全加载后经过的秒数。但在此之前，我正在尝试创建一个标识为div的{{1}}以将其添加到div父级内。此div应根据时间显示“秒”一词（基本上显示为“秒”）当seconds变量为1时，“seconds”为非）

其中“imgcenter”只是CSS来指定自动保证金。错误在于，无论何时在Chrome上运行此操作，我都会：

text2

我是否正确假设div未被添加？我错过了一步吗？请让我知道您认为错误是什么，谢谢

Answer 1

此代码：

var element = document.createElement("div");
element.id = "text2";
document.getElementById("canvas").appendChild(element);

...将您尝试定位的元素放在canvas div中。

此代码：

    document.getElementById("canvas").innerHTML = seconds;

... 销毁该元素中的所有内容，并将其替换为seconds变量中的HTML。

我是否认为没有添加div？

没有。 div被添加了，但是在你尝试用它做任何事之前你就把它破坏了。

Answer 2

在您的document.getElementById("canvas").innerHTML = seconds;行中，您正在替换canvas的完整内部HTML。这样，你的元素text2就会被删除。

如果你想独立于它自己的元素中的秒来显示单位，你应该创建一个元素unit，例如：

var counter = 0;
var seconds = 0;

$(document).ready(function (e) {
    var element = document.createElement("div");
    var unit = document.createElement("div"); // create a second element unit
    element.id = "text2";
    unit.id = "unit"; // asign the id unit
    document.getElementById("canvas").appendChild(element);
    document.getElementById("canvas").appendChild(unit);

    function gameActions() {
        document.getElementById("unit").innerHTML = seconds; // replace the unit with the valuen of seconds
        if (seconds == 1) document.getElementById("text2").innerHTML = "second";
        else document.getElementById("text2").innerHTML = "seconds";

        counter++;

        if(counter % 50 == 0) {
            seconds++;
        }

    }

    setInterval(gameActions, 20);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="canvas" class="imgcenter" style="width: 500px; height: 400px; background-color: #eeffee;">
</div>

Answer 3

您正在删除替换画布的内部HTML时添加的元素。如果您只使用整个字符串更新整个内容而不是创建单独的元素，那会更好。我也会将它包装在IIFE中，以便变量不会泄漏到全局范围内。

Type

http://jsfiddle.net/1unn153b/

无法在附加的子（div）

3 个答案: