Conto alla rovescia con condizioni

[thecricri17]

Salve ragazzi,
dato che so solo qualche base del javascript mi serve un aiutino!
Praticamente vorrei creare una pagina che abbia un conto alla rovescia ( solo in secondi!) che parte quando clicco su un div. (parte da 10)
Arrivato a 0 mi deve apparire un immagine (.sfw) e una musica di sottofondo. Se l'utente clicca sul div prima di 0 (come uno stop conto alla rovescia quindi):
se è arrivato a 3 succede la stessa cosa (come se fosse arrivato a 0), altrimenti il conto riparte da 10 e sotto c'è scritto riprova.
Please, potreste farmi questo favore? Ovviamente, la grafica me la faccio tutta io con il CSS che so usare abbastanza bene
Grazie in anticipo

 

[LorenzoPi]

ecco per gestire il conto alla rovescia:

var interval;
var y=10;  //secondi
var first_click = true;

document.getElementById('id_of_your_element').addEventListener('click',function(){
  
  var manageInterval = function(flag){ 

    if(flag && y > 0){

      interval = setInterval(function(){
       
        //
        // Qui si aspetta fino a quando y non diventa 0
        //

        y--; // decremento y sempre di 1

        //console.log(y);

        if(y==0){

          clearInterval(interval);

          //console.log('finito y='+y);
          //
          // Qui inserisci il codice per inserire l'immagine e per far partire la musica
          //
          //

        }

      },1000);
    }
    else{
      clearInterval(interval);
    }
    
  }

  if(first_click){  // Fai partire il conto alla rovescia per la prima volta

    //console.log(y);

    manageInterval(true);
  }

  if(y<=3) {   // Se il conto alla rovescia si trova a meno/uguale di 3 stoppa il conto alla rovescia

    manageInterval(false);
    y=0;

    //console.log('finito y='+y);
  }
  else{    // In caso il conto alla rovescia sta sopra di 3 e non è il primo click che ha fatto l'utente allora il conto alla rovescia comincia da capo!
    if(!first_click)
    {
      manageInterval(false); // Stop del conto alla rovescia

      y=10; // secondi

      //console.log('riprova!');
      //console.log(y);
     
      manageInterval(true); // Restart del conto alla rovescia

    }
  }

  first_click = false; // una volta che l'utente ha cliccato la prima volta sull'elemento questa variabile viene settata a false

}, false);

Forse ci saranno soluzioni migliori di questa! però intanto dovrebbe funzionare!!

 

[thecricri17]

ecco per gestire il conto alla rovescia:

var interval;
var y=10;  //secondi
var first_click = true;

document.getElementById('id_of_your_element').addEventListener('click',function(){
  
  var manageInterval = function(flag){ 

    if(flag && y > 0){

      interval = setInterval(function(){
       
        //
        // Qui si aspetta fino a quando y non diventa 0
        //

        y--; // decremento y sempre di 1

        //console.log(y);

        if(y==0){

          clearInterval(interval);

          //console.log('finito y='+y);
          //
          // Qui inserisci il codice per inserire l'immagine e per far partire la musica
          //
          //

        }

      },1000);
    }
    else{
      clearInterval(interval);
    }
    
  }

  if(first_click){  // Fai partire il conto alla rovescia per la prima volta

    //console.log(y);

    manageInterval(true);
  }

  if(y<=3) {   // Se il conto alla rovescia si trova a meno/uguale di 3 stoppa il conto alla rovescia

    manageInterval(false);
    y=0;

    //console.log('finito y='+y);
  }
  else{    // In caso il conto alla rovescia sta sopra di 3 e non è il primo click che ha fatto l'utente allora il conto alla rovescia comincia da capo!
    if(!first_click)
    {
      manageInterval(false); // Stop del conto alla rovescia

      y=10; // secondi

      //console.log('riprova!');
      //console.log(y);
     
      manageInterval(true); // Restart del conto alla rovescia

    }
  }

  first_click = false; // una volta che l'utente ha cliccato la prima volta sull'elemento questa variabile viene settata a false

}, false);

Forse ci saranno soluzioni migliori di questa! però intanto dovrebbe funzionare!!

Ciao, grazie infinite per la risposta! Avrei alcuni dubbi, intanto ti posto il codice a cui ho aggiunto l'HTML:

<!DOCTYPE html>
<html>
<head>
	<script type="text/javascript">
	var interval;
	var y=10;  //secondi
	var first_click = true;

	document.getElementById('divbotton').addEventListener('click',function(){
	  
	  var manageInterval = function(flag){ 

		if(flag && y > 0){

		  interval = setInterval(function(){
		   
			//
			// Qui si aspetta fino a quando y non diventa 0
			//

			y--; // decremento y sempre di 1

			//console.log(y);

			if(y==0){

			  clearInterval(interval);

			  //console.log('finito y='+y);
			  //
			  // Qui inserisci il codice per inserire l'immagine e per far partire la musica
			  //
			  //

			}

		  },1000);
		}
		else{
		  clearInterval(interval);
		}
		
	  }

	  if(first_click){  // Fai partire il conto alla rovescia per la prima volta

		//console.log(y);

		manageInterval(true);
	  }

	  if(y<=3) {   // Se il conto alla rovescia si trova a meno/uguale di 3 stoppa il conto alla rovescia

		manageInterval(false);
		y=0;

		//console.log('finito y='+y);
	  }
	  else{    // In caso il conto alla rovescia sta sopra di 3 e non è il primo click che ha fatto l'utente allora il conto alla rovescia comincia da capo!
		if(!first_click)
		{
		  manageInterval(false); // Stop del conto alla rovescia

		  y=10; // secondi

		  //console.log('riprova!');
		  //console.log(y);
		 
		  manageInterval(true); // Restart del conto alla rovescia

		}
	  }

	  first_click = false; // una volta che l'utente ha cliccato la prima volta sull'elemento questa variabile viene settata a false

	}, false);
	</script>
</head>
<body>
	<div style="height: 200px; width: 500px; background-color: red;" onclick="function()">Clicca qui
	</div>
	<div id="divbotton">10
	</div>
</body>
</html>

Se clicco sul primo div il contatore non si decrementa! Probabilmente ho sbagliato io, ma cosa??
I consol.log(y) devono essere un commento?
Infine, se è <= 3 dovrebbe partire sempre l'immagine e il sottofondo, ma non credo rappresenti un problema in quanto mi bastera mettere lo stesso codice che c'è sotto if(y==0), sbaglio?

 

[LorenzoPi]

console.log() era per farti vedere il risultato nella console di javascript del browser xD.. se togli // e vedi nella console dovrebbe funzionare! comunque nell'html ci sono alcune cose che non vanno bene! mo ti posto come dovrebbe essere (tolgo i console.log() per non farti incasinare tanto xD ) :

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript">
  window.onload = function(){ // aspetto che la pagina si sia caricata per evitare errori

    var interval;
    var y=10;  //secondi
    var first_click = true;

    document.getElementById('button').addEventListener('click',function(){
      
      var manageInterval = function(flag,durata){ 

        if(flag){

          interval = setInterval(function(){
           
          //
          // Qui si aspetta fino a quando y non diventa 0
          //
          if(y > 0){
            y--; // decremento y sempre di 1 se è maggiore di 0
          }

          document.getElementById('conto').innerHTML = y;

          if(y==0){
            
            //
            // Qui inserisci il codice per inserire l'immagine e per far partire la musica
            //
            // Ecco un esempio:
              var img = document.createElement('img');
              img.setAttribute("src","img/immmagine.png");  // al posto di img/immmagine.png inserisci il percorso della tua immagine
              img.setAttribute("alt","");  // inserisci un valore per l'attributo alt o sennò lascialo vuoto
              document.body.appendChild(img);

              var audio = document.createElement('audio');
              var source = document.createElement('source');
              source.setAttribute("src","file.mp3"); // al posto di "file.mp3" inserisci il percorso del tuo file audio
              source.setAttribute("type","audio/mpeg"); // in base al tipo di file audio cambi il valore di "audio/mpeg" (ad esempio non tutti i browser supportano ad esempio l'estensione .mp3)
              audio.appendChild(source);
              document.body.appendChild(audio);
            //
            //
            //

            clearInterval(interval);
          }

          },durata);
        }
        else{

          document.getElementById('conto').innerHTML = y;
          clearInterval(interval);

        }
      
      }

      if(first_click){  // Fai partire il conto alla rovescia per la prima volta
        manageInterval(true,1000);
      }

      if(y > 0){ // se y > 0 allora:

        if(y<=3) {   // Se il conto alla rovescia si trova a meno/uguale di 3 stoppa il conto alla rovescia

          manageInterval(false,0);
          y=0;
          manageInterval(true,0);

        }
        else{    // In caso il conto alla rovescia sta sopra di 3 e non è il primo click che ha fatto l'utente allora il conto alla rovescia comincia da capo!
          if(!first_click)
          {
            manageInterval(false,0); // Stop del conto alla rovescia

            y=10; // secondi
            document.getElementById('conto').innerHTML = y;
           
            manageInterval(true,1000); // Restart del conto alla rovescia

          }
        }
      }

      first_click = false; // una volta che l'utente ha cliccato la prima volta sull'elemento questa variabile viene settata a false

    }, false);
  }
  </script>
</head>
<body>
  <div id="button" style="height: 200px; width: 500px; background-color: red;">Clicca qui
  </div>
  <div id="conto">10
  </div>
</body>
</html>

Ho modificato un pochino il codice e ora dovrebbe funzionare! fammi sapere!

 

[glm1986ITALY]

Giusto per rompere un poco le scatole... mica vorrai fare una cosa simile in home page??

 

[thecricri17]

console.log() era per farti vedere il risultato nella console di javascript del browser xD.. se togli // e vedi nella console dovrebbe funzionare! comunque nell'html ci sono alcune cose che non vanno bene! mo ti posto come dovrebbe essere (tolgo i console.log() per non farti incasinare tanto xD ) :

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript">
  window.onload = function(){ // aspetto che la pagina si sia caricata per evitare errori

    var interval;
    var y=10;  //secondi
    var first_click = true;

    document.getElementById('button').addEventListener('click',function(){
      
      var manageInterval = function(flag,durata){ 

        if(flag){

          interval = setInterval(function(){
           
          //
          // Qui si aspetta fino a quando y non diventa 0
          //
          if(y > 0){
            y--; // decremento y sempre di 1 se è maggiore di 0
          }

          document.getElementById('conto').innerHTML = y;

          if(y==0){
            
            //
            // Qui inserisci il codice per inserire l'immagine e per far partire la musica
            //
            // Ecco un esempio:
              var img = document.createElement('img');
              img.setAttribute("src","img/immmagine.png");  // al posto di img/immmagine.png inserisci il percorso della tua immagine
              img.setAttribute("alt","");  // inserisci un valore per l'attributo alt o sennò lascialo vuoto
              document.body.appendChild(img);

              var audio = document.createElement('audio');
              var source = document.createElement('source');
              source.setAttribute("src","file.mp3"); // al posto di "file.mp3" inserisci il percorso del tuo file audio
              source.setAttribute("type","audio/mpeg"); // in base al tipo di file audio cambi il valore di "audio/mpeg" (ad esempio non tutti i browser supportano ad esempio l'estensione .mp3)
              audio.appendChild(source);
              document.body.appendChild(audio);
            //
            //
            //

            clearInterval(interval);
          }

          },durata);
        }
        else{

          document.getElementById('conto').innerHTML = y;
          clearInterval(interval);

        }
      
      }

      if(first_click){  // Fai partire il conto alla rovescia per la prima volta
        manageInterval(true,1000);
      }

      if(y > 0){ // se y > 0 allora:

        if(y<=3) {   // Se il conto alla rovescia si trova a meno/uguale di 3 stoppa il conto alla rovescia

          manageInterval(false,0);
          y=0;
          manageInterval(true,0);

        }
        else{    // In caso il conto alla rovescia sta sopra di 3 e non è il primo click che ha fatto l'utente allora il conto alla rovescia comincia da capo!
          if(!first_click)
          {
            manageInterval(false,0); // Stop del conto alla rovescia

            y=10; // secondi
            document.getElementById('conto').innerHTML = y;
           
            manageInterval(true,1000); // Restart del conto alla rovescia

          }
        }
      }

      first_click = false; // una volta che l'utente ha cliccato la prima volta sull'elemento questa variabile viene settata a false

    }, false);
  }
  </script>
</head>
<body>
  <div id="button" style="height: 200px; width: 500px; background-color: red;">Clicca qui
  </div>
  <div id="conto">10
  </div>
</body>
</html>

Ho modificato un pochino il codice e ora dovrebbe funzionare! fammi sapere!

Prefetto, funziona! Grazie infinitamente! Un'ultima cosetta: come posso fare a far scomparire il div-bottone e il contatore quando appare l'immagine?
P.s.= Ho aggiunto document.getElementById("button").innerHTML = "Stop!"; a if(first_click).... in modo che quando uno clicca il testo del div diventa "STOP!"

Giusto per rompere un poco le scatole... mica vorrai fare una cosa simile in home page??

Yes, in una homepage, perchè?

 

[glm1986ITALY]

Perchè, imho, è un suicidio sia a livello SEO che a livello di utilizzabilità del tuo sito:

A) Google avrebbe problemi a scansionare la "vera" home page
B) sempre più persone navigano con smartphone, tablet e phablet la maggior parte dei quali non visualizza contenuti in flash
C) Personalmente sono contrario a musiche di sottofondo ed affini; immagina se il tuo visitatore stesse sentendo "a palla" la sua musica preferita e, all'apertura del sito, si intromettesse altro... imho chiude la pagina

 

[thecricri17]

Perchè, imho, è un suicidio sia a livello SEO che a livello di utilizzabilità del tuo sito:

A) Google avrebbe problemi a scansionare la "vera" home page
B) sempre più persone navigano con smartphone, tablet e phablet la maggior parte dei quali non visualizza contenuti in flash
C) Personalmente sono contrario a musiche di sottofondo ed affini; immagina se il tuo visitatore stesse sentendo "a palla" la sua musica preferita e, all'apertura del sito, si intromettesse altro... imho chiude la pagina

A) Cercherò di ovviare il problema in qualche modo!
B) LorenzoPi ha inserito un codice che fa visualizzare un immagine e una musica di sottofondo senza flash.
C) Non è un problema. So che è molto fastidioso ( capita pure a me con le pubblicità ), ma ti posso assicurare che non è un problema

 

[glm1986ITALY]

Sono scelte.... io sono sempre rivolto ad un sito più ottimizzato per Google che per l'occhio dell'utente

 

[LorenzoPi]

Comunque ha ragione glm2006ITALY .. ad esempio le musichette di sottofondo a me darebbero fastidio ahahah xD.. però poi dipende da quello che ci vedi fare ovviamente! .. Per eliminare gli elementi basta inserire nello script questo codice dove inserisci l'immagine e l'audio, cioè:

if(y==0){
            
            //
            // Qui inserisci il codice per inserire l'immagine e per far partire la musica
            //
            // Ecco un esempio:
              var img = document.createElement('img');
              img.setAttribute("src","img/immmagine.png");  // al posto di img/immmagine.png inserisci il percorso della tua immagine
              img.setAttribute("alt","");  // inserisci un valore per l'attributo alt o sennò lascialo vuoto
              document.body.appendChild(img);

              var audio = document.createElement('audio');
              var source = document.createElement('source');
              source.setAttribute("src","file.mp3"); // al posto di "file.mp3" inserisci il percorso del tuo file audio
              source.setAttribute("type","audio/mpeg"); // in base al tipo di file audio cambi il valore di "audio/mpeg" (ad esempio non tutti i browser supportano ad esempio l'estensione .mp3)
              audio.appendChild(source);
              document.body.appendChild(audio);

              // QUI RIMUOVO GLI ELEMENTI
              document.body.removeChild(document.getElementById('button'));
              document.body.removeChild(document.getElementById('conto'));

            //
            //
            //

            clearInterval(interval);
          }

Comunque per il file audio conviene mettere diversi formati in modo tale da coprire il supporto su tutti i browser! qui http://www.w3schools.com/html/html5_audio.asp ti fa vedere l'estensione del file audio che supportano i vari browser

Comunque mi fa piacere che ti vada bene

 

[LorenzoPi]

Sono scelte.... io sono sempre rivolto ad un sito più ottimizzato per Google che per l'occhio dell'utente

Però anche l'occhio vuole la sua parte .. tanto adesso va di moda il Flat design, che a me piace parecchio, e non mi sembra poi tanto difficile ahahah