javascript - 如何动态更改 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

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

您可以查看此 fiddle 中的示例: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