如何为垂直新闻行情重复循环一组函数？答案

【问题标题】：How do I loop a set of functions over and over for a vertical news ticker?如何为垂直新闻行情重复循环一组函数？
【发布时间】：2021-02-12 12:10:37
【问题描述】：

我正在尝试创建一个垂直的最新新闻代码，并且对 javascript 非常陌生，但我希望自己学习和创建。

到目前为止，我已经创建了这个，但希望新闻在完成后重新开始循环。

    var latestNews = "February 2021 - Latest News for Feb";
    var latestNews2 = "January 2021 - Latest News for Jan";
    var latestNews3 = "December 2020 - Latest News for Dec";
    var latestNews4 = "November 2020 - Latest News for Nov";
    var latestNews5 = "October 2020 - Latest News for Oct";
    latestNewsFunction()

    function latestNewsFunction() {
        document.getElementById("latestNews").innerHTML = latestNews;
        document.getElementById("latestNews2").innerHTML = latestNews2;
        document.getElementById("latestNews3").innerHTML = latestNews3;
        document.getElementById("latestNews4").innerHTML = latestNews4;
        document.getElementById("latestNews5").innerHTML = latestNews5;
    }

    setTimeout(function(){
        document.getElementById('latestNews').className += ' hidden';
    }, 3000);

    setTimeout(function(){
        document.getElementById('latestNews2').className += ' hidden';
    }, 6000);

    setTimeout(function(){
        document.getElementById('latestNews3').className += ' hidden';
    }, 9000);

    setTimeout(function(){
        document.getElementById('latestNews4').className += ' hidden';
    }, 12000);

    setTimeout(function(){
        document.getElementById('latestNews5').className += ' hidden';
    }, 15000);

    .ln-container {
        border: 1px solid black;
        text-align: center;
        font-size: 16px;
        background-color: #eeeeee;
        height: 33px;
    }
    .lnln {
        list-style-type: none;
        font-size: 12px;
        margin: 0;
        height: 14px;
        overflow: hidden;
    }
    .hidden {
        display: none;
    }

<!DOCTYPE html>
<html>

<head>
    <title>Latest News Ticker</title>
</head>


<body>
    <div class="ln-container"><b><u>Latest News</u></b>
    <ul class="lnln">
        <li id = "latestNews"></li>
        <li id = "latestNews2"></li>
        <li id = "latestNews3"></li>
        <li id = "latestNews4"></li>
        <li id = "latestNews5"></li>
    </ul>
    </div>
</body>

如果有人有任何想法或建议，我将不胜感激。我对 javascript 比较陌生，所以目前还比较粗糙，但我打算通过实践来改进

【问题讨论】：

标签： javascript html css loops

【解决方案1】：

将您的新闻存储在一个数组中，并且只有 1 个元素在重复循环中更新：

var latestNews = [
  "February 2021 - Latest News for Feb",
  "January 2021 - Latest News for Jan",
  "December 2020 - Latest News for Dec",
  "November 2020 - Latest News for Nov",
  "October 2020 - Latest News for Oct"
]
latestNewsFunction()

function latestNewsFunction() {
  let i = 0;
  setNews(latestNews[i])
  setInterval(() => setNews(latestNews[++i % latestNews.length]), 3000)
}

function setNews(news) {
  document.getElementById("latestNews").innerHTML = news;
}

.ln-container {
  border: 1px solid black;
  text-align: center;
  font-size: 16px;
  background-color: #eeeeee;
  height: 33px;
}

.lnln {
  list-style-type: none;
  font-size: 12px;
  margin: 0;
  height: 14px;
  overflow: hidden;
}

.hidden {
  display: none;
}

<div class="ln-container"><b><u>Latest News</u></b>
  <ul class="lnln">
    <li id="latestNews"></li>
  </ul>
</div>

【讨论】：

【解决方案2】：

我想出了这个解决方案。如果要停止它，可以结合 clearTimeout 和 if 语句。 Setinterval 允许它每 3 秒循环一次。我对javascript也是半新的，所以他们可能是一个更好的解决方案。尽情享受吧！

    <div class="ln-container"><b><u>Latest News</u></b>
        <ul class="lnln">
            <li id = "latestNews">February 2021 - Latest News for Feb</li>
        </ul>
    </div>


<script>   
    var news = {
        1: "February 2021 - Latest News for Feb",
        2: "January 2021 - Latest News for Jan",
        3: "December 2020 - Latest News for Dec",
        4: "November 2020 - Latest News for Nov",
        5: "October 2020 - Latest News for Oct",
    }
    latestNewsFunction()

    function latestNewsFunction() {
        // Start counter at 2 as the first is already displayed.
        var i = 2;
        setInterval(() => {
            document.querySelector("#latestNews").innerHTML = news[i];
            i++;
            // If on last news, reset
            if (i > 5) {
                i=1;
            }
        }, 3000);
    }
</script>

【讨论】：