时间戳

首页 > 解决方案 > 换字方法

javascript - 换字方法

问题描述

我正在创建一个程序，该程序使用 JavaScript 中的函数将 HTML 中的当前单词更改为新单词。我尝试在 JavaScript 中的函数内部创建一个方法，该方法将在 1 秒后将单词更改为另一个单词。这是我尝试尝试的编码：

HTML

<html>

<body>
    <div id="demo">
        <p>some text</p>
        <p>some other text</p>
    </div>
    <script src="style.js"></script>
</body>

</html>

JavaScript

let x, a, arr, i;

function setText() {
    a = document.getElementById("demo");
    arr = a.childNodes;
    for (x = 0; x < arr.length; x++) {
        arr[x].innerHTML = "new text";
    }
    this.r = revert;
}
function revert() {
    for (i = 0; i < arr.length; i++) {
        arr[i].innerHTML = "reverted";
    }
}

setTimeout(setText, 1000);
setTimeout(setText.r, 1000);

所以，基本上这个词some text会在一秒钟后other text变成。new text我正在尝试reverted使用一种方法将其更改为一秒钟。我怎样才能做到这一点？

标签： javascripthtml

解决方案

正如我从我们的聊天中了解到的那样，这是要走的路。

let x, a, arr, i;

function setText() {
    a = document.getElementById("demo");
    arr = a.childNodes;
    for (x = 0; x < arr.length; x++) {
        arr[x].innerHTML = "new text";
    }
    setTimeout(revert, 1000);
}
function revert() {
    for (i = 0; i < arr.length; i++) {
        arr[i].innerHTML = "reverted";
    }
}

setTimeout(setText, 1000);
setTimeout(setText.r, 1000);
<html>

<body>
    <div id="demo">
        <p>some text</p>
        <p>some other text</p>
    </div>
    <script src="style.js"></script>
</body>

</html>

更简单：

let x, a, arr, i;

function setText() {
  a = document.getElementById("demo");
  arr = a.childNodes;
  for (x = 0; x < arr.length; x++) {
    arr[x].innerHTML = "new text";
  }
}

function revert() {
  for (i = 0; i < arr.length; i++) {
    arr[i].innerHTML = "reverted";
  }
}

setTimeout(setText, 1000);
setTimeout(revert, 2000);
<html>

<body>
  <div id="demo">
    <p>some text</p>
    <p>some other text</p>
  </div>
  <script src="style.js"></script>
</body>

</html>

推荐阅读