Javascript基本动画旋转刺痛
[英]Javascript basic animation rotate sting
问题描述
我很难理解这个函数的内容。 有人可以一步一步分解它吗？
<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 );
}
2 个解决方案
解决方案1
3 2016-04-26 20:17:55
当然，我可以帮忙。
首先，代码需要获取要设置动画的文本，因此它通过 id 属性查找元素的标记，在本例中为“目标”。 所以变量元素将是一个“p”标签
var element = document.getElementById(id);
以下行将实际访问元素内的隐藏 DOM 节点，称为文本节点。 要访问实际的文本字符串，您需要使用文本节点元素的 .data 属性，因为文本节点本身有一堆与之关联的属性，我们只关心内容（数据）。
var textNode = element.childNodes[0]; // assuming no other children
var text = textNode.data;
现在我们有一个变量 text，它保存了 'w3resource' 的字符串值。 下一步就是做动画了，就是每隔100ms运行一个函数的interval
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 元素，即包含文本的文本节点。
解决方案2
1 2016-04-26 20:14:36
它会读作：“每 10 秒，修改名为text的变量，使其包含当前拥有的最后一个字符，然后是从头开始的其余字符”
因此，如果您在第一次迭代中有ABCD ，它将是D （最后一个字符），然后是ABC （其余的，从头开始）
变量text来自textNode的内容，它是带有目标ID 的p 。
Javascript基本动画
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.