Conto alla rovescia hh:mm:ss

**nyo89** · 27-12-2005, 13:41

Ciao a tutti

Ho fatto una lunga ricerca sul forum, ma non ho trvoato nulla che andava bene con ciò che cerco:
Vorrei un conto alla rovescia in javascript, in modo che io gli passo un numero in secondi, e lui fa il conto alla rovescia con questi secondi, ma che sia in formato hh:mm:ss... e se possibile, che alla fine del conto alla rovescia posso impostare un evento(ad esempio un popup che si apre, o un alert).

**fcaldera** · 27-12-2005, 14:09

prova a copiare ed incollare questo

codice:

<html>
<head>
<script>
var seconds = 1000;

function $(id) {
    return document.getElementById(id);
}


function writecounter(hh, mm, ss) {
    $('ore').value = (hh < 10)? "0"+hh : hh; 
    $('min').value = (mm < 10)? "0"+mm : mm;
    $('sec').value = (ss < 10)? "0"+ss : ss;
}


function start() {
    hh = Math.floor(seconds / 3600);
    mm = Math.floor((seconds - (hh*3600)) / 60);
    ss = seconds - (hh*3600) - (mm*60);
    writecounter(hh, mm, ss);
    --seconds;
    if (seconds != -1)  {   
        setTimeout('start()', 900)
    }
    else {
      // fai qualcosa 
      alert("ho finito!");
    }
    
}


var hh = Math.floor(seconds / 3600);
var mm = Math.floor((seconds - (hh*3600)) / 60);
var ss = seconds - (hh*3600) - (mm*60);
</script>
</head>
<body>

<form>
  <input type="text" size="2" id="ore" /> :
  <input type="text" size="2" id="min" /> :
  <input type="text" size="2" id="sec" />

  
  <input type="button" onclick="start()" value="start"
</form>


<script>
writecounter(hh, mm, ss);
</script>

</body>
</html>

cambia il numero di secondi con la variabile "seconds"

**nyo89** · 27-12-2005, 14:17

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

A parte questo errorino di battitura, almeno credo,
non funziona...

**fcaldera** · 27-12-2005, 15:40

in effetti funzionava su Firefox e non su IE perchè start deve essere un nome riservato. Prova così:

codice:

<html>
<head>
<script>
var seconds = 1000;

function $(id) {
    return document.getElementById(id);
}


function writecounter(hh, mm, ss) {
    $('ore').value = (hh < 10)? "0"+hh : hh; 
    $('min').value = (mm < 10)? "0"+mm : mm;
    $('sec').value = (ss < 10)? "0"+ss : ss;
}


function startcount() {
    hh = Math.floor(seconds / 3600);
    mm = Math.floor((seconds - (hh*3600)) / 60);
    ss = seconds - (hh*3600) - (mm*60);
    writecounter(hh, mm, ss);
    seconds--;
    if (seconds != -1)  {   
        setTimeout('startcount()', 900)
    }
    else {
      // fai qualcosa 
      alert("ho finito!");
    }
    
}


var hh = Math.floor(seconds / 3600);
var mm = Math.floor((seconds - (hh*3600)) / 60);
var ss = seconds - (hh*3600) - (mm*60);
</script>
</head>
<body>

<form>
  <input type="text" size="2" id="ore" /> :
  <input type="text" size="2" id="min" /> :
  <input type="text" size="2" id="sec" />

  
  <input type="button" onclick="startcount()" value="start">
</form>


<script>
writecounter(hh, mm, ss);
</script>

</body>
</html>

Ho cambiato il solo nome della funzione...

**nyo89** · 27-12-2005, 17:10

Grazie!

funziona, ma sarebbe possibile far partire il conto alla rovescia da una scritta e non da un button? Poi ho notato che se clicchi ripetutamente il pulsante start il conto alla rovescia accelera... ed é anche possibile visualizzare i numeri non all'interno di campi di form, ma come scritte?
Grazie mille...

**fcaldera** · 27-12-2005, 17:31

così dovrebbe andare bene allora:

codice:

<html>
<head>
<script>
var seconds = 86400;

function $(id) {
    return document.getElementById(id);
}


function writecounter(hh, mm, ss) {
    $('ore').innerHTML = (hh < 10)? "0"+hh : hh; 
    $('min').innerHTML = (mm < 10)? "0"+mm : mm;
    $('sec').innerHTML = (ss < 10)? "0"+ss : ss;
}


function startcount() {
    hh = Math.floor(seconds / 3600);
    mm = Math.floor((seconds - (hh*3600)) / 60);
    ss = seconds - (hh*3600) - (mm*60);
    writecounter(hh, mm, ss);
    seconds--;
    if (seconds != -1)  {   
        setTimeout('startcount()', 900)
    }
    else {
      // fai qualcosa 
      alert("ho finito!");
    }
    
}


var hh = Math.floor(seconds / 3600);
var mm = Math.floor((seconds - (hh*3600)) / 60);
var ss = seconds - (hh*3600) - (mm*60);
</script>
</head>
<body>


  <span id="ore" ></span> :
  <span id="min" ></span> :
  <span id="sec" ></span> 

  

  
  start


<script>
writecounter(hh, mm, ss);
</script>

</body>
</html>

**nyo89** · 27-12-2005, 17:38

Grazie mille!! Davvero perfetto!Avrei ancora due domande:
In questa riga

codice:

else {
// fai qualcosa 
alert("ho finito!");
}

come potrei fare una query php?

e ancora: sarebbe possibile far si che quando fai partire il conto alla rovescia e sparisce la scritta star, ne appaia una che permette di annullare il countdown, e qundi tornare a vedere la scritta start.

**fcaldera** · 27-12-2005, 17:51

prova questo

codice:

<html>
<head>
<script>
var seconds = 1600;
var intv;

var secondsCopy = seconds;

function $(id) {
    return document.getElementById(id);
}


function writecounter(hh, mm, ss) {
    $('ore').innerHTML = (hh < 10)? "0"+hh : hh; 
    $('min').innerHTML = (mm < 10)? "0"+mm : mm;
    $('sec').innerHTML = (ss < 10)? "0"+ss : ss;
}


function startcount() {
    $('startlink').style.display = 'none'; 
    $('resetlink').style.display = 'inline'; 
    reloadTime();
}

function resetcount() {
    clearInterval(intv);
    $('startlink').style.display = 'inline'; 
    $('resetlink').style.display = 'none'; 
    secondsCopy = seconds;

    hh = Math.floor(secondsCopy / 3600);
    mm = Math.floor((secondsCopy - (hh*3600)) / 60);
    ss = secondsCopy - (hh*3600) - (mm*60);
    writecounter(hh, mm, ss);

}



function reloadTime() {
    hh = Math.floor(secondsCopy / 3600);
    mm = Math.floor((secondsCopy - (hh*3600)) / 60);
    ss = secondsCopy - (hh*3600) - (mm*60);
    writecounter(hh, mm, ss);
    secondsCopy--;
    if (secondsCopy != -1)  {   
        intv = setTimeout('reloadTime()', 900)
    }
    else {
      // fai qualcosa 
      clearInterval(intv);
      alert("ho finito!");
    }
    
}


var hh = Math.floor(seconds / 3600);
var mm = Math.floor((seconds - (hh*3600)) / 60);
var ss = seconds - (hh*3600) - (mm*60);
</script>
</head>
<body style="font: 10pt Verdana">

<form>
  <span id="ore" ></span> :
  <span id="min" ></span> :
  <span id="sec" ></span> 

  

  
  start
  Reset
</form>


<script>
writecounter(hh, mm, ss);
</script>

</body>
</html>

non puoi fare un query con php in quel punto. Al massimo puoi fare una chiamata al server con ajax e gestire il vlore di ritorno con una funzione di callback

**nyo89** · 27-12-2005, 17:58

Grazie esattamente ciò che volevo... per la query allora potrei far si che si apre un popup e la esegue li, giusto? cosa dovrei mettere
else {
// fai qualcosa
clearInterval(intv);
alert("ho finito!");
}
invece di questo?

**fcaldera** · 27-12-2005, 17:59

non usare un popup, piuttosto usa l'oggetto XMLHTTPRequest di AJAX .. cerca sul forum e/o google.

Ciao

Discussione: Conto alla rovescia hh:mm:ss

Strumenti discussione

Ricerca discussione

Visualizza

Conto alla rovescia hh:mm:ss

Permessi di invio