inserire la function orologio() in un div

aneres

Nuovo Utente
27 Feb 2012
21
0
0
ciao dovrei inserire la mia funzione orologio in un div .
fare un pulsante che mi mostri l'orologio e se lo schiaccio nuovamente l'orologio scompare.
sui i due pulsanti ci sono, faccio due funzioni uso visible e hidden e le metto nei corrispettivi pulsanti.
ho il problema di inserire l'orologio nel div! non riesco! aiuto!!!
 
Egregio...

Ciao e benvenuto sul forum.
Non vedo cosa ci sia di tanto difficile inserire l'orologio in un div?
Intanto l'orologio deve comparire in una casella di testo (input)
e poi inserire il tutto dentro il div con i relativi pulsanti
per visualizzare o nascondere il div.
Però ho usato una funzione css... display "block" e "none" direttamente nei pulsanti.

orologiorrr.jpg


Esempio
http://max400.netne.net/orologio.html

il codice
Codice:
<html>

<script language="JavaScript">
function mytime() {
var x=new Date();
h=x.getHours();
m=x.getMinutes();
s=x.getSeconds();
if(s<=9) s="0"+s;
if(m<=9) m="0"+m;
if(h<=9) h="0"+h;
time=h+":"+m+":"+s;
document.rclock.rtime.value=time;
setTimeout("mytime()",1000); }

</script>

<BODY onload="mytime()"><center>
<H3>Your local time!</H3>

<div id="ggg">
<form name="rclock">
<table border="2">
<input type="text" name="rtime" size="7">
</table>
</form>
</div>

<input type="button" onclick="document.getElementById('ggg').style.display='none';" value="nascondi">
<input type="button" onclick="document.getElementById('ggg').style.display='block';" value="mostra">
</center>
</body>
</html>

le fonti da dove ho preso il codice:
http://www.wowarea.com/italiano/aiuto/jsex2it.htm

...in cui ho aggiungo i pulsanti (con delle funzioni javascript collegate ai comandi css)
e il div chiamato "ggg" su cui interagire.

au revoir...
by Max_400
 
Ciao,

puoi utilizzare un solo pulsante che cambia lo stato da Mostra e Nascondi, secondo le impostazioni none e block del div.

Comunque i metodi date sono:

get e set , ma come letto nel link http://www.wowarea.com/italiano/aiuto/jsex2it.htm

Non è vero che non è possibile impostare una data antecedente al 1970.


La maggior parte dei metodi è diretta, tranne il metodo setTime. Questo metodo prende il tempo come numero di millisecondi dopo il primo Gennaio 1970, 00:00:00. Ovviamente, non è una notazione conveniente da eseguire. Questo metodo è inteso per l'utilizzo con il metodo getTime per impostare l'ora da un oggetto Date già stabilito. Oltre ai metodi setDate, esistono diversi metodi getDate per la visualizzazione dei valori di elementi diversi di Date. Per tutte le funzioni impostate, esistono funzioni get identiche.

Oltre ai metodi standard get, esistono due metodi, getDay e getTimezoneOffset, che visualizzano i valori che non possono essere impostati direttamente tramite l'oggetto Date. Il metodo getDay visualizza il giorno della settimana che è determinato dagli altri valori di Date, quindi non c'è bisogno di impostare questo numero esplicitamente. Il metodo getTimezoneOffset visualizza la differenza dal fuso orario di Greenwich del computer locale del client. Queste sono funzioni impostate dal sistema operativo, non dal programmatore.
Oltre ai metodi set e get, l'oggetto Date ha cinque altri metodi. Due di questi metodi, parse() e UTC(), sono statici e sono implementati utilizzando la sintassi Date.method() invece di venire appesi a un esempio effettivo di un oggetto.


Un'alternativa allo script di Max, ora Dinamica e un solo Button:


Codice:
<html>

<script language="JavaScript">
function mytime(){
var x=new Date();
h=x.getHours();
m=x.getMinutes();
s=x.getSeconds();
if(s<=9) s="0"+s;
if(m<=9) m="0"+m;
if(h<=9) h="0"+h;
time="<font face='Verdana' size='4'>"+h+":"+m+":"+s+"</font>";
document.getElementById("clock").innerHTML=time;
setTimeout("mytime()",1000); 
}
</script>

<BODY onload="mytime()"><center>
<H3>Your local time!</H3>

<div id="clock"></div>
<br />
<input type="button" value="Nascondi" onclick="if(document.getElementById('clock').style.display != ''){document.getElementById('clock').style.display = '';this.value = 'Nascondi'}else{document.getElementById('clock').style.display = 'none';this.value = 'Mostra'}">
</center>
</body>
</html>

Per visualizzare una data specifica si usa setTime e Date.parse:


Codice:
 <font face="Arial" size="2">
 
 <script type="text/javascript">
 var data = new Date();
 data.setTime(Date.parse("February, 24, 1950, 18:30:40"));
 document.write("<b>Data</b> " +data);
 document.write("<br>");
 document.write("<b>String</b> " +data.toString());
 document.write("<br>");
 document.write("<b>Locale</b> " +data.toLocaleString());
 document.write("<br>");
 document.write("<b>GMT</b> " +data.toGMTString());
 document.write("<br>");
 document.write("<b>Data</b> " +data.getDate());
 document.write("<br>");
 document.write("<b>Giorno</b> " +data.getDay());
 document.write("<br>");
 document.write("<b>Ore</b> " +data.getHours());
 document.write("<br>");
 document.write("<b>Minuti</b> " +data.getMinutes());
 document.write("<br>");
 document.write("<b>Secondi</b> " +data.getSeconds());
 document.write("<br>");
 document.write("<b>Millisecondi</b> " +data.getMilliseconds());
 document.write("<br>");
 document.write("<b>Time</b> " +data.getTime());
 document.write("<br>");
 document.write("<b>Offset</b> " +data.getTimezoneOffset());
 document.write("<br>");
 document.write("<b>Anno</b> " +data.getFullYear());
 </script>

 </font>

Questo mostra la data del mese di Febbraio, Anno 1950, giorno 24 ora 18:30:40 nei diversi formati.

Valeria.
 
Ciao e benvenuto sul forum.
Non vedo cosa ci sia di tanto difficile inserire l'orologio in un div?
Intanto l'orologio deve comparire in una casella di testo (input)
e poi inserire il tutto dentro il div con i relativi pulsanti
per visualizzare o nascondere il div.
Però ho usato una funzione css... display "block" e "none" direttamente nei pulsanti.

orologiorrr.jpg


Esempio
http://max400.netne.net/orologio.html

il codice
Codice:
<html>

<script language="JavaScript">
function mytime() {
var x=new Date();
h=x.getHours();
m=x.getMinutes();
s=x.getSeconds();
if(s<=9) s="0"+s;
if(m<=9) m="0"+m;
if(h<=9) h="0"+h;
time=h+":"+m+":"+s;
document.rclock.rtime.value=time;
setTimeout("mytime()",1000); }

</script>

<BODY onload="mytime()"><center>
<H3>Your local time!</H3>

<div id="ggg">
<form name="rclock">
<table border="2">
<input type="text" name="rtime" size="7">
</table>
</form>
</div>

<input type="button" onclick="document.getElementById('ggg').style.display='none';" value="nascondi">
<input type="button" onclick="document.getElementById('ggg').style.display='block';" value="mostra">
</center>
</body>
</html>

le fonti da dove ho preso il codice:
http://www.wowarea.com/italiano/aiuto/jsex2it.htm

...in cui ho aggiungo i pulsanti (con delle funzioni javascript collegate ai comandi css)
e il div chiamato "ggg" su cui interagire.

au revoir...
by Max_400


ok a questo punto devo fare altri 2 pulsanti e fare la stessa cosa mettendo nel div la funzione cronometro.. posso aggiungere a < body onload ="ororologio()" > anche "cronometro()" ???
 
Ciao,

puoi utilizzare un solo pulsante che cambia lo stato da Mostra e Nascondi, secondo le impostazioni none e block del div.

Comunque i metodi date sono:

get e set , ma come letto nel link http://www.wowarea.com/italiano/aiuto/jsex2it.htm

Non è vero che non è possibile impostare una data antecedente al 1970.


La maggior parte dei metodi è diretta, tranne il metodo setTime. Questo metodo prende il tempo come numero di millisecondi dopo il primo Gennaio 1970, 00:00:00. Ovviamente, non è una notazione conveniente da eseguire. Questo metodo è inteso per l'utilizzo con il metodo getTime per impostare l'ora da un oggetto Date già stabilito. Oltre ai metodi setDate, esistono diversi metodi getDate per la visualizzazione dei valori di elementi diversi di Date. Per tutte le funzioni impostate, esistono funzioni get identiche.

Oltre ai metodi standard get, esistono due metodi, getDay e getTimezoneOffset, che visualizzano i valori che non possono essere impostati direttamente tramite l'oggetto Date. Il metodo getDay visualizza il giorno della settimana che è determinato dagli altri valori di Date, quindi non c'è bisogno di impostare questo numero esplicitamente. Il metodo getTimezoneOffset visualizza la differenza dal fuso orario di Greenwich del computer locale del client. Queste sono funzioni impostate dal sistema operativo, non dal programmatore.
Oltre ai metodi set e get, l'oggetto Date ha cinque altri metodi. Due di questi metodi, parse() e UTC(), sono statici e sono implementati utilizzando la sintassi Date.method() invece di venire appesi a un esempio effettivo di un oggetto.


Un'alternativa allo script di Max, ora Dinamica e un solo Button:


Codice:
<html>

<script language="JavaScript">
function mytime(){
var x=new Date();
h=x.getHours();
m=x.getMinutes();
s=x.getSeconds();
if(s<=9) s="0"+s;
if(m<=9) m="0"+m;
if(h<=9) h="0"+h;
time="<font face='Verdana' size='4'>"+h+":"+m+":"+s+"</font>";
document.getElementById("clock").innerHTML=time;
setTimeout("mytime()",1000); 
}
</script>

<BODY onload="mytime()"><center>
<H3>Your local time!</H3>

<div id="clock"></div>
<br />
<input type="button" value="Nascondi" onclick="if(document.getElementById('clock').style.display != ''){document.getElementById('clock').style.display = '';this.value = 'Nascondi'}else{document.getElementById('clock').style.display = 'none';this.value = 'Mostra'}">
</center>
</body>
</html>

Per visualizzare una data specifica si usa setTime e Date.parse:


Codice:
 <font face="Arial" size="2">
 
 <script type="text/javascript">
 var data = new Date();
 data.setTime(Date.parse("February, 24, 1950, 18:30:40"));
 document.write("<b>Data</b> " +data);
 document.write("<br>");
 document.write("<b>String</b> " +data.toString());
 document.write("<br>");
 document.write("<b>Locale</b> " +data.toLocaleString());
 document.write("<br>");
 document.write("<b>GMT</b> " +data.toGMTString());
 document.write("<br>");
 document.write("<b>Data</b> " +data.getDate());
 document.write("<br>");
 document.write("<b>Giorno</b> " +data.getDay());
 document.write("<br>");
 document.write("<b>Ore</b> " +data.getHours());
 document.write("<br>");
 document.write("<b>Minuti</b> " +data.getMinutes());
 document.write("<br>");
 document.write("<b>Secondi</b> " +data.getSeconds());
 document.write("<br>");
 document.write("<b>Millisecondi</b> " +data.getMilliseconds());
 document.write("<br>");
 document.write("<b>Time</b> " +data.getTime());
 document.write("<br>");
 document.write("<b>Offset</b> " +data.getTimezoneOffset());
 document.write("<br>");
 document.write("<b>Anno</b> " +data.getFullYear());
 </script>

 </font>

Questo mostra la data del mese di Febbraio, Anno 1950, giorno 24 ora 18:30:40 nei diversi formati.

Valeria.

ok a questo punto devo fare altri 2 pulsanti e fare la stessa cosa mettendo in un altro div la funzione cronometro.. posso aggiungere a < body onload ="ororologio()" > anche "cronometro()" ???
 
ma non credo che ce ne sia bisogno.
Comunque vedo che è arrivata Valeria
ti lascio in buone mani lei è molto brava
bye bye

espongo in maniera migliore l'esercizio che dovrei fare, ma che non riesco :

Realizzare una pagina web, collegata ad un file js)che contenga 2 livelli:

livello per visualizzare un orologio (hh:mm:ss) in tempo reale
livello per visualizzare un cronometro, che venga attivato e stoppato da 2 pulsanti, Start e Stop.
I livelli devono essere resi visibili solo a richiesta , quindi nella pagina devono esserci i pulsanti:

Visualizza orologio - Nascondi orologio

Visualizza cronometro - Nascondi cronometro
 
Ciao,

per quello che vuoi fare nessun problema ma:

livello per visualizzare un orologio (hh:mm:ss) in tempo reale
livello per visualizzare un cronometro, che venga attivato e stoppato da 2 pulsanti, Start e Stop.
I livelli devono essere resi visibili solo a richiesta , quindi nella pagina devono esserci i pulsanti:

Visualizza orologio - Nascondi orologio

Visualizza cronometro - Nascondi cronometro

Per Stoppare il cronometro e farlo ripartire visto che hai detto "attivato e stoppato da 2 pulsanti, Start e Stop." :confused: ti servono altri due pulsanti oltre a Mostra e Nascondi.

posso aggiungere a < body onload ="ororologio()" > anche "cronometro()" si.


Valeria.
 
Ciao,

per quello che vuoi fare nessun problema ma:



Per Stoppare il cronometro e farlo ripartire visto che hai detto "attivato e stoppato da 2 pulsanti, Start e Stop." :confused: ti servono altri due pulsanti oltre a Mostra e Nascondi.

posso aggiungere a < body onload ="ororologio()" > anche "cronometro()" si.


Valeria.

sì esatto quando faccio apparire il cronometro, questo deve avere altri 2 pulsanti ovvero star e stop..
 
Guarda un po se ti piace questo...

cronom.jpg


Esempio
http://max400.netne.net/cronometro.html

...l'ho fatto con le mie zampette, c'è solo di sistemarlo un po con un cacciavite
ma mi sembra già carino.

il codice:
Codice:
<script>
function inizio(){
c=0;
s=0;
document.getElementById('bersaglio1').innerHTML=c;
document.getElementById('bersaglio2').innerHTML=s;
}


function incrementa(){
c=c+1;
document.getElementById('bersaglio1').innerHTML=c;
document.getElementById('bersaglio2').innerHTML=s;
if(c>100){
s=s+1;
c=0;
}
}

function timerf(){
timer=setInterval("incrementa()", 10);
}
function interrompi(){
clearInterval(timer);
}
</script>


<body onload="inizio()">
<div align="center">
<table><tr><td id="bersaglio2"></td><td> : </td><td id="bersaglio1"></td></tr></table>


<input type="button" onclick="timerf()" value="start">
<input type="button" onclick="interrompi()" value="stop">

</div>
</body>


Basta aggiugere il precedente script per visualizzarlo o nasconderlo o meglio
gli altri 2 pulsanti e il gioco è fatto!

al <div align="center"> basta aggiungere un "id" per visualizzare o nascondere il tutto

Vedi un po se ti piace

au revoir
by Max_400


Aggiornamento:
ho sistemato il tremolio...
http://max400.netne.net/cronometro2.html

basta aggiungere uno stupido width=50 alla seconda cella
quella dei centesimi.
 
Ultima modifica:
Ciao,

Codice:
<html>
<head>
<title>Cronometro - Orologio Dinamico</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script type="text/javascript">
var o=0;
var m=0;
var s=0;
var d=0;
var v = "";
var st=1;
function avvia(){
if (st==1){
st=0;
cronometro();
}}
function cronometro(){
if(st==0){
d+=1;
if(d>9){d=0;s+=1;}
if(s>59){s=0;m+=1;}
if(m>59){m=0;o+=1;}
if(o<10){v="0" + o;} else {v=o;}
if(m<10){v=v + ":0" + m;} else {v=v + ":" + m;}
if(s<10){v=v + ":0" + s;} else {v=v + ":" + s;}
v = v + ":" + d;
vv = "<font face='Verdana' size='4'>"+v+"</font>";
document.getElementById("crono").innerHTML=vv;
setTimeout("cronometro()", 100);
}}
function ferma(){
st=1;}
function mytime(){
var x=new Date();
hh=x.getHours();
mm=x.getMinutes();
ss=x.getSeconds();
if(ss<=9) ss="0"+ss;
if(mm<=9) mm="0"+mm;
if(hh<=9) hh="0"+hh;
time="<font face='Verdana' size='4'>"+hh+":"+mm+":"+ss+"</font>";
document.getElementById("clock").innerHTML=time;
setTimeout("mytime()",1000); 
}
</script>
</head>

<body bgcolor="#FFFFFF" onload="avvia(); mytime();">

<table width="75%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr> 
<td align="center" width="50%" height="60"><font face="Arial, Helvetica, sans-serif" size="4" color="#003366"><b>CRONOMETRO DINAMICO</b></font></td>
<td align="center" width="50%" height="60"><font face="Arial, Helvetica, sans-serif" size="4" color="#003366"><b>ORLOGIO DINAMICO</b></font></td>
</tr>
<tr> 
<td align="center" width="50%" valign="bottom"> 
<div id="mostra">
<div id="crono"></div>
<br />
<input type="button" onclick="avvia();" value="Start" /> <input type="button" onclick="ferma();" value="Stop" />
</div>
<br />
<input type="button" onclick="document.getElementById('mostra').style.display='none';" value="Nascondi cronometro">
<input type="button" onclick="document.getElementById('mostra').style.display='block';" value="Visualizza cronometro"></td>
<td align="center" width="50%" valign="bottom"> 
<div id="clock"></div><br /><br />
<br />
<input type="button" onclick="document.getElementById('clock').style.display='none';" value="Nascondi">
<input type="button" onclick="document.getElementById('clock').style.display='block';" value="Mostra"></td>
</tr>
</table>
</body>
</html>

l'orologio è lo stesso dell'esempio precedente, il cronometro mostra l'ora, i minuti i secondi e i millisecondi:

00:00:00:0

Button Start Stop per fermare e far ripartire il crono e i Button Nascondi cronometro e Visualizza cronometro.

Si può aggiungere una funzione per azzerare i valori mostrati (ma solo dopo aver fermato il cronometro con il tasto Stop)

@Max

ciao Max, nell'esempio che hai postato ogni volta che premi il tasto start, senza prima aver fermato l'esecuzione dello script, la velocità di esecuzione aumenta, se lo premi due volte quello che dovrebbe fare in un secondo lo fa in metà tempo 0,50 secondi, fino ad arrivare a 0 e ti mostra i secondi con la velocità in millisecondi.

Un salutone, Valeria. :byebye:
 
Mia cara dottoressa...

...hai ragione tesorino inoltre non avevo sistemato i secondi quando si arriva ad un numero superiore a 59 deve scattare il minuto...

ecco un nuovo esempio
cronometro1.gif


http://max400.netne.net/cronometro3_.html

Per evitare che l'utente (testa di minch...) clicchi più volte sul tasto "start"
basta aggiungere una variabile booleana.
Tali variabili usati in molti liguaggi come in Flash per evitare che un suono si ripeta 2 o 3 volte
o per accendere o spegnere la musica utilizzando un solo pulsante vengono usate queste pseudo-variabili
come anche in php... per verificare se una sessione è aperta vai alla pagina protetta; oppure no...
ritorna al login. (Questo lo dico per qualke insetto che non lo sà).

Mia cara civetta prova questo script e vedi come ti sembra.
Codice:
<script>

function inizio(){
boolean=false;
c=0;
s=0;
m=0;
document.getElementById('bersaglio1').innerHTML=c;
document.getElementById('bersaglio2').innerHTML=s;
document.getElementById('bersaglio3').innerHTML=m;
}


function incrementa(){
c=c+1;
document.getElementById('bersaglio1').innerHTML=c;
document.getElementById('bersaglio2').innerHTML=s;
document.getElementById('bersaglio3').innerHTML=m;
if(c>99){
s=s+1;
c=0;
if(s>59){
s=0;
m=m+1;
if(m>59){
m=1;
}
}
}
}

function timerf(){
if(boolean==false){
boolean=true;
timer=setInterval("incrementa()", 10);
}
}
function interrompi(){
clearInterval(timer);
boolean=false;
}
</script>


<body onload="inizio()">
<div align="center">
<img src="topo-che-salta.gif" width="" height="">
<table><tr><td width="10" id="bersaglio3"></td><td> : </td><td width="10" id="bersaglio2"></td><td> . </td><td width="50" id="bersaglio1"></td></tr></table>


<input type="button" onclick="timerf()" value="start">
<input type="button" onclick="interrompi()" value="stop">

</div>
</body>
 
Ultima modifica:
Ciao,

ho aggiunto alcune funzioni al Cronometro:

Start - Stop - Azzera - Intertempi, ogni volta che premi il tasto Intertempi ti salva quando hai premuto il Button.

L'orologio nessuna modifica

Codice:
<html>
<head>
<title>Cronometro - Orologio Dinamico</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script type="text/javascript">
var o=0;
var m=0;
var s=0;
var d=0;
var v = "";
var ct = 0;
var st=1;
function avvia(){
if (st==1){
st=0;
cronometro();
}}
function cronometro(){
if(st==0){
d+=1;
if(d>9){d=0;s+=1;}
if(s>59){s=0;m+=1;}
if(m>59){m=0;o+=1;}
if(o<10){v="0" + o;} else {v=o;}
if(m<10){v=v + ":0" + m;} else {v=v + ":" + m;}
if(s<10){v=v + ":0" + s;} else {v=v + ":" + s;}
v = v + ":" + d;
vv = "<font face='Verdana' size='4'>"+v+"</font>";
document.getElementById("crono").innerHTML=vv;
setTimeout("cronometro()", 100);
}}
function it(){
if(st==0){
ct+=1;
document.getElementById("intertempi").appendChild(document.createTextNode(ct + ". " + v));
document.getElementById("intertempi").appendChild(document.createElement("br"));}}
function azzera(){
if(st==1){
o=0;m=0;s=0;d=0;
vv = "<font face='Verdana' size='4'>0"+o+":0"+m+":0"+s+":"+d+"</font>";
document.getElementById("crono").innerHTML=vv;
if(d==0)st==1
}}
function ferma(){
st=1;}
function mytime(){
var x=new Date();
hh=x.getHours();
mm=x.getMinutes();
ss=x.getSeconds();
if(ss<=9) ss="0"+ss;
if(mm<=9) mm="0"+mm;
if(hh<=9) hh="0"+hh;
time="<font face='Verdana' size='4'>"+hh+":"+mm+":"+ss+"</font>";
document.getElementById("clock").innerHTML=time;
setTimeout("mytime()",1000); 
}
</script>
</head>

<body bgcolor="#FFFFFF" onload="avvia();mytime()">

<table width="75%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr> 
<td align="center" width="50%" height="60"><font face="Arial, Helvetica, sans-serif" size="4" color="#003366"><b>CRONOMETRO DINAMICO</b></font></td>
<td align="center" width="50%" height="60"><font face="Arial, Helvetica, sans-serif" size="4" color="#003366"><b>ORLOGIO DINAMICO</b></font></td>

</tr>
<tr> 
<td align="center" width="50%" valign="bottom"> 
<div id="mostra"> 
<div id="crono"></div>
<br />
<input type="button" onclick="avvia();" value="Start" />
<input type="button" onclick="ferma();" value="Stop" />
<input type="button" onclick="azzera()" value="Azzera" />
<input type="button" onclick="it()" value="Intertempi" />   
</div>
<br />
<input type="button" onclick="document.getElementById('mostra').style.display='none';" value="Nascondi cronometro">
<input type="button" onclick="document.getElementById('mostra').style.display='block';" value="Visualizza cronometro"></td>
<td align="center" width="50%" valign="bottom"> 
<div id="clock"></div>
<br />

<br />
<br />
<input type="button" onclick="document.getElementById('clock').style.display='none';" value="Nascondi">
<input type="button" onclick="document.getElementById('clock').style.display='block';" value="Mostra"></td>
</tr>
<tr>
<td align="center" width="50%"><br /><font face="Arial, Helvetica, sans-serif" size="2">Intertempi<br /><br /><div id="intertempi"></div></font></td>
<td align="center" width="50%" valign="bottom">&nbsp;</td>
</tr>
</table>
</body>
</html>

Valeria.
 

Discussioni simili