如何更改动态HTML的内容

我有一些消息要显示在每个特定的时间间隔，例如10秒。但目前我只能显示一条消息。如何显示其余消息间隔.. 这里是代码..如何更改动态HTML的内容

<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在这里。请帮我..

来源

2014-10-09 Hansal Mehta

设置数组，插入新消息，并在显示时删除第一条消息。 – David 2014-10-09 07:37:33

Duplicate Question http://stackoverflow.com/questions/26270631/how-to-change-the-content-on-specific-interval-using-jquery/26270660#26270660 – Amy 2014-10-09 07:49:52

制造阵列的所有邮件，并增加的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);

你应该控制你需要的邮件，你得到消息的阵列结束后出现：我已经做了循环以第一条消息开始。

对于做输入/输出过渡渐变只需添加这些功能arounfd html的 “写” 的一句话：在

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

查看样品：http://jsfiddle.net/s6c4hs91/1/

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

来源

2014-10-09 07:52:51

我有一个更亲爱的查询。假设我需要以动画褪色的方式显示文本。我可以点它吗？ – 2014-10-09 08:14:53

答案更新为淡入/淡出 – 2014-10-09 09:27:30

试试这个：你可以使用数组而不是三个不同的变量，并在每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

来源

2014-10-09 07:36:45

'if（i == v.length）''而不是'if（i == 3）'会真的太棒了不是吗？所以数组可以随意增长.. – caramba 2014-10-09 07:39:59

我试过了你的代码，但它不能正常工作 – 2014-10-09 07:59:29

对不起，我的数组声明语法错了，更正并添加了演示链接，请现在就试试。 – 2014-10-09 09:35:09

尝试：

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);

来源

2014-10-09 07:37:31

如何更改动态HTML的内容

回答

相关问题