Conto alla rovescia con condizioni

T

thecricri17

Nuovo Utente
22 Gen 2014
5
0
0
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 :)
 
L

LorenzoPi

Utente Attivo
21 Gen 2014
98
0
0
ecco per gestire il conto alla rovescia:
Codice: 
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!! :)
 
T

thecricri17

Nuovo Utente
22 Gen 2014
5
0
0
LorenzoPi ha scritto:
ecco per gestire il conto alla rovescia:
Codice: 
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!! :)
Clicca per allargare...

Ciao, grazie infinite per la risposta! Avrei alcuni dubbi, intanto ti posto il codice a cui ho aggiunto l'HTML:
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?
 
L

LorenzoPi

Utente Attivo
21 Gen 2014
98
0
0
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 ) :
HTML: 
<!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! :D
 
Ultima modifica:
T

thecricri17

Nuovo Utente
22 Gen 2014
5
0
0
LorenzoPi ha scritto:
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 ) :
HTML: 
<!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! :D
Clicca per allargare...

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??
Clicca per allargare...
Yes, in una homepage, perchè?
 
glm2006ITALY

glm2006ITALY

Moderatore
Membro dello Staff
MOD
9 Apr 2009
1.311
16
38
38
Vercelli
www.webepc.it
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 :rolleyes:
 
T

thecricri17

Nuovo Utente
22 Gen 2014
5
0
0
glm2006ITALY ha scritto:
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 :rolleyes:
Clicca per allargare...

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 :)
 
L

LorenzoPi

Utente Attivo
21 Gen 2014
98
0
0
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è:
Codice: 
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 :)
 
Ultima modifica:
Devi accedere o registrarti per poter rispondere.
Discussioni simili
Autore Titolo Forum Risposte Data
filomeni Popup pubblicitario con conto alla rovescia Snippet Javascript 1
L piccola modifica a script conto alla rovescia ... e fattibile? PHP 4
T conto alla rovescia, continuato anche se chiuso.. PHP 3
C Conto alla rovescia - Countdown (al secondo) Javascript 1
L Tenere conto vittorie Database 0
R amministratori di forum disposti a fare marketing per conto terzi Email Marketing 0
Z Versamento contanti nel conto corrente ditta Leggi, Normative e Fisco 0
monikasaini fasulle conto Discussioni Varie 0
alessandro1997 L'accesso al tuo conto è stato limitato Discussioni Varie 8
T Acquisto dominio conto terzi Domini 1
A Arricchisci te stesso, e il tuo conto in banca! Guadagnare col Sito 0
L Creare ancore interne alla pagina PHP 1
K [PHP] Aggiungere caratteri ad una stringa in base alla lunghezza della stessa PHP 2
csi Inviare file jpg in locale alla stampante con php PHP 0
S Passare query o utm alla pagina successiva Domini 1
napuleone div centrato alla pagina posto sopra ai contenuti HTML e CSS 1
D popolare campi tra th alla select PHP 36
F si blocca alla lettera b. Javascript 1
L Audio in finestra modale ed interruzione alla chiusura jQuery 9
felino Risalire alla versione di Windows preinstallata Windows e Software 0
MarcoGrazia Eliminare in automatico i caratteri spuri all'inizio e alla fine di una stringa Snippet PHP 0
T Contatore alla rovescia su più elementi simultaneamente Javascript 4
P Visual Studio VB.NET Visualizzare un messaggio alla scadenza. .NET Framework 0
T ritornare alla pagina precedente con HTTP_REFERER o altro PHP 4
F Passare una variabile php dal DB mysql alla pagina PHP 3
F [PHP] Reindirizzare utenti alla propria area personale PHP 1
P [Woocommerce] Modificare il Bottone Checkout di Woocommerce in base alla categoria di prodotto E-Commerce 10
felino htaccess: redirect da una subdirectory alla root Web Server 2
I [Javascript] window.location.href porta alla nuova pagina e ritorna incomprensibilmente. Javascript 0
maxnegri Eliminare url index.php con variabili e reindirizzare alla home del sito PHP 7
Cosina [PHP] Cancellare una riga da un file txt in base alla data PHP 1
andreas88 Immagini non leggibili dopo trasferimento alla scheda SD Smartphone e tablet 0
Max 1 Grave episodio alla Fondazione Banca degli Occhi di Mestre Discussioni Varie 7
A [Javascript] Pop-up di avviso "Aggiungi nomepagina alla schermata home" Javascript 1
G [PHP] Chiudere determinate finestre browser alla disconnessione PHP 0
Federico.Marcelo Alla ricerca di scrittori post guest Offerte e Richieste di Lavoro e/o Collaborazione 0
otto9due Capire la funzione del parametro event passato alla funzione.. jQuery 1
S Autorizzazione alla localizzazione Sviluppo app per iOS 0
A [PHP] Modificare campo database in base alla scelta dell'utente PHP 2
M [Cerco] Cerco Staff per SitoWeb Professionale dedicato alla Tecnologia! Offerte e Richieste di Lavoro e/o Collaborazione 0
Elena Lazzarini [Magento] Prezzo variabile in base alla priorità di spedizione Magento 0
P [Javascript] Voce del menu evidenziata in base alla pagina attiva Javascript 48
T [PHP] tornare alla pagina con gli input già compilati PHP 2
F [Javascript] select list concatenate - passare valore dalla prima alla seconda Javascript 7
creatorweb [PHP] estrazione ciclica dati con 2 dati alla volta PHP 2
MarcoGrazia [mysql][mariadb]Raggruppare query in base alla data MySQL 2
Tuttoinformatico [Gratuito][Cerco] Cerco Staff per SitoWeb Professionale dedicato alla Tecnologia! Offerte e Richieste di Lavoro e/o Collaborazione 1
E [PHP] [HTML] Codice che gestisce l'input e la trasmissione dei dati alla mia email PHP 1
F [HTML] Div in scroll insieme alla pagina HTML e CSS 0
felino [404] Page 404 e redirect alla home page SEO e Posizionamento 0

Discussioni simili

Alto Basso