Prova di un cronometro in Js

di
elecim91
il
3 risposte
E
elecim91
Pochi posts
Iscritto da
mag, 2020
Messaggi:
4

Prova di un cronometro in Js

Salve, ho da poco scritto un codice che dovrebbe essere un cronometro:

<p id="secondi">0</p>
<p id="decimi">0</p>
<p id="minuti">0</p>

<script type ="text/javascript">
var sec =0;
var min ="";
var dec="";
for(dec = 0; dec <=60; dec++){
	(function cronometro2(ind){
		setTimeout(function(){document.getElementById("decimi").innerHTML= ((ind+1)*100, ':', ind);}, 100*(ind+1));})(dec); /*timer per i decimi*/
		
		while(dec == 10){
           dec=dec*0; sec= sec +1;document.getElementById("secondi").innerHTML=sec} /*cambio decimi a secondi*/
		   
		while(sec==60){
		   sec=0; min= min+1;document.getElementById("minuti").innerHTML=min} /*cambio secondi a minuti*/
		   
		if(min==1){break} /*fine ciclo*/
}

</script>
la funzione che calcola i decimi funziona correttamente, ma i 2 cicli che dovrebbero cambiare i decimi a secondi e i secondi in minuti non funzionano, quindi il codice si blocca quando i decimi arrivano a 10. mi potreste aiutare? ringrazio in anticipo

3 Risposte

  • Alka
    Alka
    Utente Famoso
    Iscritto da
    nov, 2014
    Messaggi:
    3312

    Re: Prova di un cronometro in Js

    Il codice mi sembra poco strutturato e molto farraginoso: non si capisce qual è la logica che vi sta dietro.

    Tanto per cominciare, esaminiamolo formattato un pochino meglio:
    
var sec = 0;
var min = "";
var dec = "";

for (dec = 0; dec <= 60; dec++) {

	(function cronometro2(ind) {
		setTimeout(function () { 
			document.getElementById("decimi").innerHTML = ((ind + 1) * 100, ':', ind); 
		}, 100 * (ind + 1));
	})(dec);

	while (dec == 10) {
		dec = dec * 0;
		sec = sec + 1;
		document.getElementById("secondi").innerHTML = sec;
	}

	while (sec == 60) {
		sec = 0;
		min = min + 1;
		document.getElementById("minuti").innerHTML = min;
	}

	if (min == 1) 
		break;
}
    Non capisco perché fai operazioni aritmetiche con le variabili min e dec inizializzandole però con un valore di tipo stringa, precisamente una stringa vuota.

    Ancora meno chiaro è l'uso della funzione cronometro2, che avvia un setTimeout contenente sia calcoli che visualizzazioni, senza che sia chiaro gli altri cicli while() cosa abbiano a che fare.

    Teoricamente, basterebbe un setTimeout() unico adatto a scandire il tempo quando si intende avviare il cronometro, e a ogni "tick" del timeout andare a vedere qual è il tempo trascorso (sottraendo la data/ora attuale da quella memorizzata alla partenza), estrapolando le parti di ore/minuti/secondi/decimi o quello che occorre per lo scopo di visualizzazione.

    Scritta in questo modo, mi sembra poco manutenibile e poco chiara come logica.
  • E
    elecim91
    Pochi posts
    Iscritto da
    mag, 2020
    Messaggi:
    4

    Re: Prova di un cronometro in Js

    Il set timeout serve per calcolare i decimi, e contiene il document get element perchè non avevo (o non sapevo) modo di visualizzare i decimi (nel sito dove l'ho visto lo usavano con un console.log, ma io ho preferito farlo così). quanto ai due cicli while dovrebbero cambiare la variabile "sec" (o min) quando i decimi (o i secondi) arrivano a 60, azzerando poi la variabile di riferimento. Essendo di 2° superiore (e essendo js il primo metodo di programmazione, non so cosa siano le stringhe, nè come fare il calcolo che mi ha spiegato sopra)
  • Alka
    Alka
    Utente Famoso
    Iscritto da
    nov, 2014
    Messaggi:
    3312

    Re: Prova di un cronometro in Js

    elecim91 ha scritto:

    Il set timeout serve per calcolare i decimi, e contiene il document get element perchè non avevo (o non sapevo) modo di visualizzare i decimi (nel sito dove l'ho visto lo usavano con un console.log, ma io ho preferito farlo così). quanto ai due cicli while dovrebbero cambiare la variabile "sec" (o min) quando i decimi (o i secondi) arrivano a 60, azzerando poi la variabile di riferimento. Essendo di 2° superiore (e essendo js il primo metodo di programmazione, non so cosa siano le stringhe, nè come fare il calcolo che mi ha spiegato sopra)
    Il setTimeout() puoi invocarlo per aggiornare l'interfaccia utente "ogni tot" quando ti serve, in base alla precisione, ma il conteggio del tempo che passa non puoi tenerlo con un ciclo, bensì calcolarlo al volo sottraendo delle date (quella corrente nel momento in cui misuri da quella iniziale memorizzata quando dai il via al cronometro).

    Oltre a questo, sei fai cicli while() in quel modo, tieni occupata la CPU e il browser risulterà bloccato, non facendoti vedere probabilmente nulla di aggiornato fino alla fine della procedura, quando i cicli terminano (ammesso che ciò avvenga).

    Io mi farei spiegare meglio la procedura o ripenserei l'implementazione tenendo conto di questi suggerimenti e procedendo passo per passo (prima i conti, poi la visualizzazione, ecc.).

    Ciao!
Devi accedere o registrarti per scrivere nel forum
3 risposte