Question

我很难理解这个功能中的内容。有人可以一步一步地分解它吗？

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

function animate_string(id) {
var element = document.getElementById(id);
var textNode = element.childNodes[0]; // assuming no other children
var text = textNode.data;

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

Answer 1

当然，我可以提供帮助。

首先，代码需要获取您想要设置动画的文本，因此它会通过id属性查找元素的标记，在这种情况下是＆＃39; target＆＃39;。所以变量元素将是一个＆＃39; p＆＃39;标签

var element = document.getElementById(id);

以下行实际上将访问元素内隐藏的DOM节点，称为文本节点。要访问实际的文本字符串，您需要使用文本节点元素的.data属性，因为文本节点本身有一堆与之关联的属性，我们只关心内容（数据）。

var textNode = element.childNodes[0]; // assuming no other children
var text = textNode.data;

现在我们有一个变量text，它包含＆＃39; w3resource＆＃39;的字符串值。下一步是执行动画，动画由每隔100毫秒运行一个函数的间隔运行

setInterval( function() {
   ...
}, 100 );

在每100ms调用的函数内部，可以看到以下代码：

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

首先，通过从字符串中取出最后一个字符并附加其余字符串来创建一个新的文本字符串。例如＆＃39; StackOverflow＆＃39;会成为＆＃39; wStackOverflo＆＃39;。在下一次迭代中，它将转换＆＃39; wStackOverflo＆＃39;每隔100毫秒到#St; OwStackOverfl＆＃39;等。

最后一行代码将新字符串分配给HTML DOM元素，我们的文本节点包含文本。

Answer 2

它将读作：“每十分之一秒，修改名为text的变量，使其包含当前具有的最后一个字符，然后是从头开始的其余字符“

因此，如果您在第一次迭代时有ABCD，那么D（最后一个字符）后跟ABC（其余部分，从头开始）

变量text来自textNode的内容，p的内容带有目标 ID。

Javascript基本动画旋转刺痛

2 个答案: