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.