Я новичок в кодировании. Я хочу написать JS-программу для периодического поворота строки (в правильном направлении), каждый раз удаляя последний символ и присоединяя его к началу. Но когда я запускаю свой код, вся строка или вся страница будет заполнена строкой. Что не так с моим кодом?
Я определил функцию, которая: 1. сохраняет содержимое элемента HTML p в переменной; 2. изменяет значение переменной на новую строку с последним символом исходной строки, прикрепленным к ее началу; 3. изменяет содержимое элемента p на новую строку и 4. повторяет этот процесс, используя метод setInterval.
function animation() {
var text = document.getElementsByTagName("p")[0].innerHTML;
setInterval(function() {
text = text.substring(text.length - 1, 0) + text.substring(0, text.length - 2);
document.getElementsByTagName("p")[0].innerHTML = text;
}, 100);
}
<body onload = "animation()">
<p>JavaScript</p>
</body>
Результат:
Я думаю, что проблема может быть в вашей индексации подстроки. Вы ссылаетесь на substring(text.length - 1, 0)
, который возвращает строку от предпоследнего до первого символа. Кажется, вам нужен только последний символ, который будет substring(text.length - 1, text.length)
.
Я также изменил text.substring(0, text.length - 2)
на text.substring(0, text.length - 1)
, потому что вам, кажется, нужна вся строка без последнего символа, а не минус два последних символа.
Достигает ли это вашей цели?
function animation() {
let text = document.getElementsByTagName("p")[0].innerHTML;
setInterval(function() {
text = text.substring(text.length - 1, text.length) + text.substring(0, text.length - 1);
document.getElementsByTagName("p")[0].innerHTML = text;
}, 100);
}
<body onload = "animation()">
<p>JavaScript</p>
</body>
Для справки, подстрока (MDN) работает так:
подстрока (indexStart, indexEnd)
Метод substring() возвращает часть строки от начального индекса до конечного индекса, исключая его, или до конца строки, если конечный индекс не указан.
Вы не читаете значение предыдущего вращения. Вот более четкая рабочая версия:
function animation() {
var text = document.getElementsByTagName("p")[0];
setInterval(function() {
text.innerHTML = text.innerHTML.at(-1) + text.innerHTML.slice(0, -1)
}, 100);
}
<body onload = "animation()">
<p>JavaScript</p>
</body>
Я считаю, что ваша проблема заключается в небольшом непонимании того, как работают функции подстроки: text.substring(text.length - 1, 0)
не обязательно имеет большой смысл, потому что начальная точка находится после конечной точки. В этом случае это просто эквивалентно text.substring(0, text.length - 1)
, что объясняет, почему ваш текст становится все больше и больше.
Замена text.substring(text.length - 1, 0)
на text.substring(text.length - 1, text.length)
должна помочь, и, надеюсь, понятно, почему это получает последнюю букву. Кроме того, конечный индекс не является включающим, то есть подстрока не включает символ в индексе, поэтому вам нужно заменить text.substring(0, text.length - 2)
на text.substring(0, text.length - 1)
В качестве примечания: вместо того, чтобы использовать text.substring(text.length - 1, text.length)
для получения последнего символа, вы можете просто использовать text[text.length - 1]
, чтобы получить его, что, как мне кажется, немного чище.
Вот фрагмент рабочего кода с упомянутыми изменениями:
function animation() {
var text = document.getElementsByTagName("p")[0].innerHTML;
setInterval(function() {
text = text[text.length - 1] + text.substring(0, text.length - 1);
document.getElementsByTagName("p")[0].innerHTML = text;
}, 100);
}
<body onload = "animation()">
<p>JavaScript</p>
</body>
Чтобы убедиться, что вы понимаете, как все работает, я бы попробовал посмотреть, сможете ли вы заставить его вращаться / вращаться в другую сторону.
Примечание: НЕ используйте substr
; он устарел и не рекомендуется для использования. Кроме того, он отличается от substring
: он «возвращает часть строки, начиная с указанного индекса и впоследствии расширяясь на заданное количество символов». (MDN, выделение мое). substring
, с другой стороны, принимает начальный и конечный индексы.
@DarrylNoakes спасибо, отметил - я просто предположил, что это избыточно, я обновлю свой ответ
лучший способ сделать это - использовать массив символов:
function animation(){
//select the P by the id
var p = document.getElementById("reversed");
setInterval(()=>{
let text = p.textContent; //get the text
let newText = [...text]; //turn it into array of chars
let lastLetter=newText.pop(); //pop the last element
newText.unshift(lastLetter); //add it to the start of the array
p.textContent=newText.join(""); //update the text
},100)
}
<body onload = "animation()">
<p id = "reversed">JavaScript</p>
</body>
Предупреждение: запуск фрагмента в конечном итоге (возможно, довольно быстро) приведет к сбою вкладки, поскольку он бесконечно создает все больший и больший контент. Проверено на моем телефоне...