Aggiungi per una pagina web in javascript

Question

Quello che voglio fare è che: una pagina web con l'aggiornamento continuo dei contenuti. (Nel mio caso è aggiornando ogni 2s) Nuovo contenuto viene aggiunto a quello vecchio invece di sovrascrivere.

Ecco il codice che ho:

var msg_list = new Array(
    "<message>Hello, Clare</message>", "<message>Hello,Lily</message>",
    "<message>Hello, Kevin</message>", "<message>Hello, Bill</message>"
);
var number = 0;
function send_msg()
{
 document.write(number + " " + msg_list[number%4]+'<br/>');
 number = number + 1;
}
var my_interval = setInterval('send_msg()', 2000); 

Tuttavia, sia in IE e Firefox, una sola linea viene stampato, e la pagina non verrà più aggiornato. È interessante notare che in Chrome, le linee sono in fase di stampa in modo continuo, che è quello che sto cercando.

so che document.write () viene chiamato quando la pagina viene caricata in base al questo link . Quindi non è sicuramente il modo per aggiornare la pagina web in modo continuo. Quale sarà il modo migliore per ottenere ciò che voglio fare?

Completamente novizio in Javascript. Grazie.

Lily

Answer 1

È possibile aggiungere alla proprietà innerHTML:

var number = 0;
function send_msg()
{
    document.getElementById('console').innerHTML += (number + " " + msg_list[number%4]+'<br/>');
    number = number + 1;
}

Questo codice aggiungerà il messaggio ad un elemento con un ID di console, come ad esempio

<div id="console"></div>

Tra l'altro, è cattiva pratica alla chiamata setInterval con una stringa.

Al contrario, passare la funzione stessa, come questo:

var my_interval = setInterval(send_msg, 2000); 

Answer 2

Vorrei iniziare a guardare la libreria jQuery. Questo vi farà risparmiare un sacco di dolore.

Che cosa si vuole fare è mantenere le linee inserite in una tabella, utilizzando ad esempio:

$('table tbody').append('<tr><td>some value</td></tr>');

Answer 3

I avrebbe un div o qualche altro contenitore, in questo modo:

<div id="msgDiv"></div>

Poi scrivere ad esso come usare .innerHTML , in questo modo:

var msg_list = new Array(
    "<message>Hello, Clare</message>", "<message>Hello,Lily</message>",
    "<message>Hello, Kevin</message>", "<message>Hello, Bill</message>"
);
var number = 0;
function send_msg()
{
    document.getElementById("msgDiv").innerHTML += number + " " + msg_list[number%4]+'<br/>';
    number++;
}
var my_interval = setInterval(send_msg, 2000); 

Si può vedere un esempio di lavoro di questo qui

Answer 4

Questa sarebbe un'ottima occasione per imparare un po 'di programmazione DOM.

Uso della DOM per aggiornare la pagina deve risultare in meno overhead che semplicemente concatenare più HTML in esso. Trova il nodo che si desidera mettere gli aggiornamenti in, e fare un appendChild su ogni aggiunta successiva.

Answer 5

Le risposte a questa domanda può essere utile: Qual è un modo semplice per web-ify mia linea di comando daemon?