Question

我在网上找到了此代码，但是当消息用完时，它似乎并非从头开始。它只是停止。我该如何解决？

<script>
  $(document).ready(function() {
    function nextMsg() {
      if (messages.length == 0 ) {
      } else {
        $('#message').html(messages.pop()).fadeIn(2000).delay(1000).fadeOut(2000,nextMsg);
    }
};

    var messages = [
      "For the love of music.",
      "We want you to succeed, that's why we're here.",
      "You make the music, we'll do the rest.",
      "Get your music out, EVERYWHERE.",
      "We are here to change the game."
    ].reverse();

    $('#message').hide();
      nextMsg();
    });
</script>

我希望当没有更多的字符串需要读取时，它将再次从var =消息的顶部开始

Answer 1

您可以使用模运算符和数组的长度导致内容循环。

您的代码没有循环的原因是它使用pop（）从数组中删除了内容-因此一个循环并删除了所有内容-这样可以使计数器无限增加，但始终返回基于hte数组长度的索引（使用模运算符）。

这样，数组不会发生突变，引号将不断循环。

$(document).ready(function() {

var messages = [
    "For the love of music.",
    "We want you to succeed, that's why we're here.",
    "You make the music, we'll do the rest.",
    "Get your music out, EVERYWHERE.",
    "We are here to change the game."
].reverse();

var counter = 0;
var len = messages.length;
     
function nextMsg() {
 var message = messages[counter % len];
 counter++;
 $('#message').html(message).fadeIn(2000).delay(1000).fadeOut(2000,nextMsg);
};


$('#message').hide();
nextMsg();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id="message"></p>

Answer 2

您错过了再次进入数组开头的逻辑

$(document).ready(function() {

var count = 0
function nextMsg() {
  if (messages.length == 0 ) {
  } else {
    count =  count < messages.length ? count + 1 : 0
  $('#message').html(messages[count]).fadeIn(2000).delay(1000).fadeOut(2000,nextMsg);
    }
  };

  var messages = [
  "For the love of music.",
  "We want you to succeed, that's why we're here.",
  "You make the music, we'll do the rest.",
  "Get your music out, EVERYWHERE.",
  "We are here to change the game."
  ].reverse();

  $('#message').hide();
  nextMsg();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id="message"></p>

Answer 3

基本逻辑；

它使用jquery，不要忘记将jquery导入到您的项目中。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

那里有一个代码

$("#message");

作为要显示的参数

因为参数是* ID *，所以您只需要使用ID作为参数来创建HTML元素。

<div id="message"></div>

如果这样，代码将指示类。

$ (".message")

然后是HTML元素：

<div class="message"></div>

Answer 4

您错过了添加html内容，请将此内容添加到您的代码中。

我添加了一个片段来重复数据

<div id="message"></div>

$(document).ready(function() {
  var i = 0;
  function nextMsg() {
    data = i % messages.length;
  $('#message').html(messages[data]).fadeIn(2000).delay(1000).fadeOut(2000,nextMsg);
    i++;
  };

  var messages = [
  "For the love of music.",
  "We want you to succeed, that's why we're here.",
  "You make the music, we'll do the rest.",
  "Get your music out, EVERYWHERE.",
  "We are here to change the game."
  ].reverse();

  $('#message').hide();
  nextMsg();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="message"></div>

如何使javascript代码循环重复文本？

4 个答案: