logo标签列表

在JavaScript中旋转一个字符串

javascripthtmlsetinterval
3
我对编程还很新。 我想写一个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>

结果： 结果
2
警告：运行这段代码片段最终会导致标签页崩溃，因为它无限地创建越来越大的内容。在我的手机上进行了测试... - Darryl Noakes
2
警告：运行此代码片段将最终（可能相当快地）导致选项卡崩溃，因为它无休止地创建越来越大的内容。在我的手机上进行了测试... - undefined
4个回答
2
我觉得问题可能出在你的子字符串索引上。你引用了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>

为了参考，substring（MDN）的使用方法如下：

substring(indexStart, indexEnd)

substring() 方法返回字符串从起始索引到结束索引（不包括结束索引）的部分，如果没有提供结束索引，则返回字符串的末尾部分。

2
你没有读取上一个旋转的值。这是一个更清晰的工作版本： 

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>

2
我相信你的问题只是对子字符串函数工作方式的轻微误解：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[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>

为了确保你理解一切的运作方式，我建议你尝试看看能否让它朝另一个方向滚动/旋转。
3
请注意：不要使用substr函数，它已被弃用，不建议使用。此外，它与substring函数是不同的：substr函数"从指定索引开始并返回之后给定数量的字符"（MDN，重点是我添加的）。另一方面，substring函数接受起始和结束索引参数。 - Darryl Noakes
3
注意：不要使用substr；它已经被弃用，不建议使用。而且，它和substring是不同的：它“返回字符串的一部分，从指定的索引开始，并且_延伸给定数量的字符_。”（MDN，强调是我的）。另一方面，substring则需要起始和结束索引。 - undefined
1
@DarrylNoakes 谢谢，我注意到了 - 我只是以为这是多余的，我会更新我的答案。 - MilesZew
1
@DarrylNoakes 谢谢，我注意到了 - 我只是以为这是多余的，我会更新我的回答。 - undefined
0
更好的方法是使用字符数组来完成： 

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>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接