Javascript basic animation rotate sting

-2

Мне сложно понять, что происходит в этой функции. Может кто-то сломать его шаг за шагом?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); 
}

источник

2016-04-26 ZZ83

Код обзора не предназначен для пояснения кода, написанного кем-то другим. – JJJ

@Tuvia on CR это работа рецензента, чтобы объяснить рецензентам, что делает их код, а не наоборот. –

@ Mat'sMug Yea, но переполнение стека тоже не для этого. Тогда для чего нужен обзор кода? – Tuvia

Он гласил: «Каждый десятый секунды, изменить переменную text так, что она содержит последний символ, который в настоящее время он имеет, а затем остальных персонажей, начиная с самого начала»

Так что если у вас есть ABCD на первой итерации будет D (последний символ), а затем ABC (остальные, начиная с самого начала)

переменная text приходит фр om содержание textNode, которое является p с целью ID.

источник

2016-04-26 20:14:36

Несомненно, я могу помочь.

Сначала код должен получить текст, который вы хотите оживить, поэтому он ищет тег элемента по атрибуту id, в данном случае «target». Таким образом, переменная элемент будет «Р» тег

var element = document.getElementById(id);

Следующая строка будет на самом деле доступ к скрытому узел DOM, называемый текстовый узел, внутри элемента. Чтобы получить доступ к фактической текстовой строке, вам необходимо использовать атрибут .data элемента текстового узла, потому что сам текстовый узел имеет кучу атрибутов, связанных с ним, и мы заботимся только о содержании (данных).

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

Теперь у нас есть переменная, текст, которая содержит строковое значение 'w3resource'. Следующий шаг должен сделать анимацию, которая запускается на интервал запуска функции каждый 100ms

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

Внутри функции, которая вызывается каждые 100 мс, следующий код Просмотрен:

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

Первый новая строка текста создается, беря последний символ из строки и добавляя остальную часть строки. Например, «StackOverflow» станет «wStackOverflo». На следующей итерации он преобразует «wStackOverflo» в «owStackOverfl» и т. Д. Каждые 100 мс.

Последняя строка кода присваивает новую строку элементу HTML DOM, нашему текстовому узлу, содержащему текст.

источник

2016-04-26 20:17:55

Javascript basic animation rotate sting

ответ

Смежные вопросы