Question

我只是在遵循一个网站上的JavaScript教程。我在理解功能时遇到问题。

实际上，这是为了旋转单词。最后一个单词被删除并添加到第一个位置的位置，或者您可以在0索引位置说。

在下面，我将粘贴该函数的代码，在JavaScript代码部分中，我无法理解setInterval函数，以及为什么在行textNode.data = text;中写行

与var text = textNode.data;中的animate_string()相反

function animate_string(id) {
  var element = document.getElementById("target");
  var textNode = element.childNodes[0];
  var text = textNode.data;
  setInterval(function() {
    text = text[text.length - 1] + text.substring(0, text.length - 1);
    textNode.data = text;
  }, 100);
}

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript basic animation</title>
</head>
<body onload="animate_string('target')">
  <pre id="target">w3resource </pre>
</body>
</html>

Answer 1

我们逐行解释一下JavaScript：

astropy.coordinates.SkyCoord

演示传递给function animate_string(id){ // Get element #target var element = document.getElementById("target"); // Get the first node of #target, // which is the "w3resource " text node var textNode = element.childNodes[0]; // Cache the data of the first node of #target, // which is the "w3resource " string var text = textNode.data; // setInterval is a global function that runs a function repeatedly, with interval of n secodns. // In this case, the interval is 100 milliseconds. setInterval(function () { // text[text.length - 1]: Gets the last character of `text` // text.substring(...) : Extracts all characters of `text`, except the last character // Concat the last character to the start of the remaining characters. // Assign the new value to `text`. text = text[text.length - 1] + text.substring(0, text.length - 1); // Reassign the new `text` to the data of the text node, // thus updating the displayed text textNode.data = text; }, 100); }的函数的结果：

setInterval

More about setInterval。

Answer 2

setInterval以第二个参数指定的周期调用您的函数。在你的情况下

function ()
{
text = text[text.length - 1] + text.substring(0, text.length - 1);
textNode.data = text;
}

将每100毫秒执行一次。在这里：

var text = textNode.data;

我们存储来自textNode的文本值以供将来计算，这里

textNode.data = text;

我们用新值覆盖textNode的文本值。由于我们在定期运行的功能中将其覆盖，因此用户可以看到动画文本。

无法理解我从教程网站获得的javaScript代码

2 个答案: