Question

我在我的网站上有一个部分我想要显示一些提醒或新闻。我希望显示x秒的第一个消息，然后继续播放第二个消息x秒并且不再显示第一个消息，然后再显示第三个消息而不显示第二个消息等等。我刚开始使用javascript和我正在制作的代码仅用于一次运行然后停止我希望这可以无限地或非常高的数字，以便该人可以在页面上看到新闻警报。一个接一个地。

我感谢任何帮助。请告诉我一个彻底的代码，因为自从我大约2周前开始以来，我对此有点无趣。谢谢！

Html：

    <div id="news1">Here are some news! 1111</div>
    <div id="news2">Here are some news! 2222</div>
    <div id="news3">Here are some news! 3333</div>

CSS：

#news1, #news2, #news3{

    visibility:hidden;
}

使用Javascript：

    function showIt() {
        document.getElementById("news1").style.visibility = "visible";
        document.getElementById("news3").style.visibility = "hidden";
        document.getElementById("news2").style.visibility = "hidden";

    }
    setInterval("showIt()", 3000); 
    function showIt2(){
        document.getElementById("news2").style.visibility  = "visible";
        document.getElementById("news1").style.visibility = "hidden";
        document.getElementById("news3").style.visibility = "hidden";
    }
    setInterval("showIt2()", 6000)
    function showIt2(){
        document.getElementById("news2").style.visibility  = "visible";
        document.getElementById("news1").style.visibility = "hidden";
        document.getElementById("news3").style.visibility = "hidden";
        setInterval("showIt3()", 3000);
    }

Answer 1

在不更改CSS / HTML的情况下，下面的代码将处理任意数量的元素，您只需将其ID作为参数发送：

function showAlternate(ids, interval, currentVisible) {
    if (currentVisible === undefined) currentVisible = ids.length-1; // last one
    document.getElementById(ids[currentVisible]).style.visibility = "hidden";
    var idToShow = ++currentVisible % ids.length;
    document.getElementById(ids[idToShow]).style.visibility = "visible";
    setTimeout(function() { showAlternate(ids, interval, idToShow); }, interval);
}
// example usage:
showAlternate(["news1", "news2", "news3", "news4", "news5"], 3000);

<强> Demo jsfiddle here ：

Answer 2

我已经改变了javascript代码的逻辑，如下所示，

var newsList = ["news1","news2","news3"];
var currIndex = newsList.length-1;
var timeoutObj;
function showNext() {
    document.getElementById(newsList[currIndex]).style.visibility = "hidden";
    if(currIndex >= newsList.length-1)
        currIndex = 0;
    else
        currIndex += 1;
    document.getElementById(newsList[currIndex]).style.visibility = "visible";
    timeoutObj = setTimeout(showNext,3000); 
}
showNext();

检查它是否对您有帮助..这是jsfiddle http://jsfiddle.net/m63Up/

Answer 3

首先了解如何使用 setInterval（）。您指定2个参数作为功能来呼叫，延迟指定两次呼叫之间等待的时间。

然后在你的例子中：

setInterval（“showIt（）”，3000）; //将每隔3000毫秒调用showIt（）
setInterval（“showIt2（）”，6000）; //将每6000毫秒调用showIt2（）
setInterval（“showIt3（）”，3000）; //将每3000毫秒调用showIt3（）（在showIt2（）中等待6000毫秒后）

把它放在时间轴上：

0 ms：没什么
3000 ms：showIt（）被称为
6000 ms：调用showIt（）并调用showIt2（）
9000 ms：调用showIt（）并调用showIt3（）
12000 ms：调用showIt（），调用showIt2（）并调用showIt3（）
15000 ms：调用showIt（）并调用 showIt3（）两次
...

你应该尝试只使用一个setInterval（）和变量来选择下一个函数。

var myIndex = 0;

setInterval(updateFunction, 3000);

function updateFunction(){
  switch(myIndex)
  {
    case 0: showIt();
    break;
    case 1: showIt2();
    break;
    case 2: showIt3();
    break;
  }
  ++ myIndex;
  if (myIndex > 2) myIndex = 0;
}

编辑添加到：http://jsfiddle.net/fA4cu/

Answer 4

这个Pure-JS示例将与您当前模式的任意数量的div一起使用，因此您可以拥有id“news4”，“news5”，“news6”等。

此外，您可以通过更改INTERVAL变量来更改显示的新闻更改频率，在此示例中，新闻每1秒更改一次。

JSFIDDLE - http://jsfiddle.net/g9YRb/3/

<强> JS

var INTERVAL = 1000;
var myprefix = "news";
var maxnewsnumber = document.getElementsByTagName("div").length;


var myindex = 0;

function alternatenews(idx)
{
   idx++;

   myindex = idx;
    function retrigger()
    {
        setTimeout(function()
       {
           alternatenews(myindex);
       },INTERVAL);
    }
   if(myindex > maxnewsnumber)
   {
      document.getElementById(myprefix + parseInt(myindex-1)).style.visibility = "hidden";
       myindex = 0;
       alternatenews(myindex);

   }
    else if(myindex == 1)
   {
       document.getElementById(myprefix + myindex).style.visibility = "visible";
       retrigger();
   }
    else
    {
        document.getElementById(myprefix + parseInt(myindex-1) ).style.visibility = "hidden";
       document.getElementById(myprefix + myindex).style.visibility = "visible";
        retrigger();
    }

}
alternatenews(myindex);

<强> HTML

<div id="news1">Here are some news! 1111</div>
<div id="news2">Here are some news! 2222</div>
<div id="news3">Here are some news! 3333</div>
<div id="news4">Here are some news! 4444</div>
<div id="news5">Here are some news! 5555</div>

<强> CSS

div
{
   visibility: hidden
}

我想使用Javascript一个接一个地显示3个或更多div

4 个答案: