Javascript基本動畫旋轉刺痛

-2

我很難理解這個函數中會發生什麼。有人可以逐步分解它嗎？Javascript基本動畫旋轉刺痛

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

來源

2016-04-26 ZZ83

代碼審查不適用於解釋其他人編寫的代碼。 – JJJ

@Tuvia on CR它是審閱者的工作，可以解釋審閱者他們的代碼在做什麼，而不是相反。 –

@ Mat'sMug是的，但堆棧溢出也不是。那麼代碼審查是什麼？ – Tuvia

這將讀作：「第二的每10名，修改名爲text的變量，以便它包含的最後一個字符，它目前已，隨後從一開始啓動其餘字符」

所以，如果你在第一次循環有ABCD這將是D（最後一個字符），其次是ABC（休息，從頭開始）

變量text來自FR om textNode的內容是p與目標 ID。

來源

2016-04-26 20:14:36

好的，我可以幫忙。

首先，代碼需要獲取要設置動畫的文本，以便通過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);

被稱爲每100ms在函數內部的功能，下面的代碼所示：

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

第一通過從字符串中取出最後一個字符並附加字符串的其餘部分來創建一個新的文本字符串。例如'StackOverflow'將變成'wStackOverflo'。在下一次迭代中，它會每隔100ms將'wStackOverflo'轉換爲'owStackOverfl'等。

最後一行代碼將新字符串分配給HTML DOM元素，即包含文本的文本節點。

來源

2016-04-26 20:17:55

Javascript基本動畫旋轉刺痛

回答

相關問題