Question

我有一些消息要显示在每个特定的间隔集上，例如10秒。但是目前我只能显示一条消息。如何在间隔后显示其余的消息。这是代码..

   <script type="text/javascript">
        var v = "Your Text<br/>Hello";
        var v2 = "Your Text2<br/>Hello2";
        var v3 = "Your Text3<br/>Hello3";

        window.setInterval(function () {
            $("#dynamicMessage").html(v);
        }, 10000);
    </script>

根据我当前的代码，我能够显示第一条消息但是如何在这里显示其他像v2，v3。请帮帮我..

Answer 1

试试这个：您可以使用数组而不是三个不同的变量，并在每10秒后迭代一次数组。

<script type="text/javascript">
        var v = ["Your Text<br/>Hello","Your Text2<br/>Hello2","Your Text3<br/>Hello3"];
        var i = 0;
        window.setInterval(function () {
            $("#dynamicMessage").html(v[i]);
            i++;
            if(i==3)
              i=0;
        }, 10000);
    </script>

<强> DEMO

Answer 2

试一试：

var messages = ["Your Text<br/>Hello","Your Text2<br/>Hello2","Your Text3<br/>Hello3"];
 var index = 0;

 window.setInterval(function () {
      index /=3;
       $("#dynamicMessage").html(messages[index]);
 }, 10000);

Answer 3

创建一个包含所有消息的数组，并在 setInterval 函数中增加一个计数器。

您可以查看此小提琴中的示例：http://jsfiddle.net/s6c4hs91/

var v = {};
v[0] = "Your Text<br/>Hello";
v[1] = "Your Text2<br/>Hello2";
v[2] = "Your Text3<br/>Hello3";

var i = 0;

window.setInterval(function () {

    $("#dynamicMessage").html(v[i]);

    if (i == 2) {
        i = 0;
    } else {
        i = i + 1;
    }

}, 500);

在到达消息数组的末尾之后，您应该控制消息的显示方式：我已经完成了第一条消息的循环。

为了进行淡入/淡出过渡，只需在html“写入”句子中添加这些函数：

$("#dynamicMessage").fadeOut(800,'swing',$("#dynamicMessage").html(v[i]).fadeIn(100));

查看示例：http://jsfiddle.net/s6c4hs91/1/

了解更多信息。关于淡入淡出看看：http://www.w3schools.com/jquery/eff_fadein.asp

如何动态更改HTML的内容

3 个答案: