如何动态更改HTML的内容

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>

演示

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“ write”语句周围添加以下功能：

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

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

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