用計時器顯示和隱藏多個div

我正在嘗試製作一個消息框，它將顯示活動消息，從MySQL表中一次顯示一個消息。我不知道會有多少個div，因爲它可以是我的數據庫中的任何數量的活動消息。現在我已經打印出需要通過ajax計時器和php腳本的div，此計時器每20秒鐘查詢數據庫以檢查新消息。我的PHP腳本打印出這樣的divs：用計時器顯示和隱藏多個div

include 'status.php'; 

$strings = Status::messages(); 
$i = 1; 
foreach($strings as $string){ 
    print '<div id="'.$i.'">'.$string.'</div>'; 
    $i++; 
}

這打印一個div與從1到x的id完成。現在我需要一個可以一次顯示其中一個div的JavaScript函數。要得到div的總數，我這樣做：

var top_level_div = document.getElementById('messagecontainer'); 
var count = top_level_div.getElementsByTagName('div').length;

我無法弄清楚如何從這裏走。

編輯：

這裏是載入我的AJAX定時器消息：

ajaxTimer8 = new Ajax.PeriodicalUpdater('messagecontainer', 'includes/messagereloader.php', { 
    method: 'get', frequency: 20, decay: 1, 
    onSuccess : function() { 
    pollCounter = 11; 
    } 
});

來源

2012-12-18 Twistar

通過AJAX加載和顯示消息的代碼在哪裏？這就是你的計時器需要放置的地方。 – Blazemonger

應該顯示一個隨機的div，或所有的一個接一個？ – hereandnow78

@ hereandnow78一個接一個都會是最好的。 – Twistar

好吧，我試圖以模擬的div已經存在：

<div id="messagecontainer"> 
    <div>1</div> 
    <div>2</div> 
    <div>3</div> 
</div>

的div內messagecontainer默認隱藏（顯示無）：

// in your css 
#messagecontainer > div { 
    display: none; 
}

現在在我們的腳本中，我們創造那裏每15秒的間隔，將以前的div來顯示無，而目前div來顯示塊：

var top_level_div = document.getElementById('messagecontainer') 
    , divs = top_level_div.getElementsByTagName('div') 
    , counter = 0 
    , interval = window.setInterval(function() { 

     // hide the previous div if it exists (counter > 0) 
     if(divs[counter - 1]) { 
      divs[counter - 1].style.display = "none"; 
     } 

     // set the current div visible 
     divs[counter].style.display = "block"; 
     counter += 1; 

     // have we finished all divs? then clear the interval 
     if(counter === divs.length) { 
     window.clearInterval(interval); 
     } 
    }, 15000); // run that every 15 seconds

看到這裏工作的例子：http://jsfiddle.net/ZY4Vb/2/

來源

2012-12-18 15:37:22 hereandnow78

用計時器顯示和隱藏多個div

回答

相關問題