Javascript基本动画旋转刺痛

Javascript basic animation rotate sting

本文关键字：旋转 动画 Javascript      更新时间：2023-09-26

我很难理解这个函数中的内容。有人可以一步一步分解吗？

<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 );
}

当然，我可以帮忙。

首先，代码需要获取要进行动画处理的文本，因此它通过 id 属性（在本例中为"target"）查找元素的标签。 所以变量元素将是一个"p"标签

var element = document.getElementById(id);

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

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

现在我们有一个变量 text，它保存 'w3resource' 的字符串值。下一步是做动画，它通过每 100ms 运行一个函数的间隔运行

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

在每 100 毫秒调用一次的函数中，可以看到以下代码：

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

首先，通过从字符串中获取最后一个字符并附加字符串的其余部分来创建一个新的文本字符串。 例如，"StackOverflow"将变为"wStackOverflo"。 在下一次迭代中，它将每 100 毫秒将 'wStackOverflo' 转换为 'owStackOverfl' 等。

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

它读作："每 10 秒修改名为 text 的变量，使其包含当前拥有的最后一个字符，然后是从头开始的其余字符"

因此，如果您在第一次迭代中ABCD，它将是D（最后一个字符）后跟ABC（其余的，从头开始）

变量text来自与目标 ID p的textNode内容。

相关文章：