Nel seguente esempio si crea un documento contenente un sezione vuota delimitata dal tag <div> e </div>
Quando si apre la pagina, l'evento onLoad del BODY richiama la funzione orologio.
La sezione è vuota. Alla proprietà id è stato assegnato il nome ora.
<html>
<head>
<title>Orario</title>
<script>
</script>
</head>
<body onLoad="orologio()">
Sono le ore:
<div id="ora"></div>
</body>
</html>
La funzione Orologio crea un oggetto contenente la data e l'ora corrente, compone una stringa orario con l'ora attuale (anteponendo uno 0 ai numeri composti da una sola cifra), la assegna alla proprietà innerHTML e schedula un evento timeout per aggiornare l'orario dopo 1 secondo.
Nella sezione script inserire la seguente funzione:
function orologio() {
d= new Date()
h = String(d.getHours())
m = String(d.getMinutes())
s = String(d.getSeconds())
if (h.length == 1) h = "0" + h
if (m.length == 1) m = "0" + m
if (s.length == 1) s = "0" + s
orario = h + ":" + m + ":" + s
document.getElementById("ora").innerHTML = orario
setTimeout("orologio()", 1000)
}
In questo esempio si deve notare la tecnica usata per scrivere nella sezione.
Il metodo getElementById applicato all'oggetto document, ottiene un riferimento alla sezione del documento identificata con ore.
alla proprietà innerHTML, della sezione, viene assegnato il valore contenuto nella stringa orario