如何更改動態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的內容

回答

相關問題