Quesito di logica in js

Jakub Lemiszewski

Utente Attivo
5 Dic 2013
119
1
0
Salve,
Ho aperto questa discussioni per discutere con voi di un quesito di logica da fare in javascript con l'output a schermo.
Il problema è il seguente:

Ci sono tre colori il rosso, giallo e verde.
Il rosso deve apparire 5 secondi dopo che la pagina ha caricato.
Il giallo deve apparire 2 secondi dopo che è apparso il rosso ma deve rimanere insieme al rosso.
Il verde deve apparire 7 secondi dopo ma dopo che gli altri colori sono scomparsi.
Dopo di che deve ricomnciiare dai primi due colori in un loop.

Il quesito va risolto solo con javascript e html senza altri framework.
Questo quesito è stato posto a una lezione di programmazione su js.

Perfavore per gli esempi se potete usare jsfiddle o simili.

Grazie mille delle vostre soluzioni.
 

marino51

Utente Attivo
28 Feb 2013
3.203
207
63
Lombardia
in un html potresti avere i 3 colori (sfondo di qualcosa) e
3 campi "hidden" che li rappresentano messi a 0 (spenti)
poi con timeout puoi cambiare il valore dei campi
HTML:
function Cambiacolore()
{
...
) { setTimeout(function () { Cambiacolore(); }, 500); return false; };
e quando i campi vanno a 1 (acceso) giustappunto cambi il colore

ma lascio a te il codice, io sono un ... principiante

e come vedi, poche idee e ben conFuse
ciao
Marino
 

marino51

Utente Attivo
28 Feb 2013
3.203
207
63
Lombardia
quello che segue è codice (che ho salvato) di CRIRIC (onore a lui), è in un suo post che non ricordo
quindi faccio prima a postarti il codice

tratta i colori anche se in modo diverso dalla tua richiesta, ma forse è una buona base ...
HTML:
Codice HTML:
<!DOCTYPE html>
<html>
    <head>
        <title>Gioco - sistema la bandiera</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script>
            $(document).ready(function() {
                var index = false;
                $(".blocco").click(function() {
                    $(this).css("box-shadow", "0px 0px 10px 2px #333333 inset");
                    if (index !== false) {
                        var index2 = $(this).index();
                        setTimeout(function() {
                            $(".blocco").css("box-shadow", "none");
                            var col = $(".blocco").eq(index).css("background-color");
                            var col2 = $(".blocco").eq(index2).css("background-color");
                            $(".blocco").eq(index).css("background-color", col2);
                            $(".blocco").eq(index2).css("background-color", col);
                            index = false;
                        }, 300);
                    } else {
                        index = $(this).index();
                    }
                });
            });
        </script>
        <style>
            html body {
                text-align: center;
                background-color: #E4E4E4;
                margin:50px 0;
            }
            .contenitore {
                margin:auto;
                width: 846px;
                overflow: hidden;
            }
            .blocco {
                width:140px;
                height:140px;
                float: left;
                cursor:pointer;
            }
            .red {
                background-color: red;
            }
            .green {
                background-color: green;
            }
            .white {
                background-color: white;
            }
        </style>
    </head>
    <body>
        <div class='contenitore'>
            <div class='blocco white'></div>
            <div class='blocco white'></div>
            <div class='blocco white'></div>
            <div class='blocco white'></div>
            <div class='blocco white'></div>
            <div class='blocco white'></div>
            <div class='blocco green'></div>
            <div class='blocco green'></div>
            <div class='blocco green'></div>
            <div class='blocco green'></div>
            <div class='blocco green'></div>
            <div class='blocco green'></div>
            <div class='blocco red'></div>
            <div class='blocco red'></div>
            <div class='blocco red'></div>
            <div class='blocco red'></div>
            <div class='blocco red'></div>
            <div class='blocco red'></div>
        </div>
    </body>
</html>
 

marino51

Utente Attivo
28 Feb 2013
3.203
207
63
Lombardia
alla fine se ho interpretato bene i tempi, non è così difficile,
ciò che è difficile è fargli mantenere la sequenza ...
gli "if" all'interno della funzione che viene richiamata dai "timeout" servono proprio alla sequenza

Perfavore per gli esempi se potete usare jsfiddle o simili.
no questo no ... non sono pratico, ti posto il codice qui

HTML:
<!DOCTYPE html>
<html>
    <head>
        <title>Gioco - semaforo</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script>
		$(document).ready(function() {
			var i = 0;
			TrafficLamp(0);

			function TrafficLamp(x) 
			{
				if (i > 2) { alert('DONE !'); return; };

				if (x == 0)
				{
					i++;
					$(".blocco").eq(1).css("background-color", "#E4E4E4");
					$(".blocco").eq(2).css("background-color", "#E4E4E4");
					$(".blocco").eq(0).css("background-color", "red");
					setTimeout(function() {  TrafficLamp(1); }, 5000);
				}
				if (x == 1)
				{
					$(".blocco").eq(1).css("background-color", "yellow");
					setTimeout(function() {  TrafficLamp(2); }, 2000);
				}
				if (x == 2)
				{
					$(".blocco").eq(0).css("background-color", "#E4E4E4");
					$(".blocco").eq(1).css("background-color", "#E4E4E4");
					$(".blocco").eq(2).css("background-color", "green");
					setTimeout(function() {  TrafficLamp(0); }, 7000);
				}
			}
		});
        </script>
        <style>
            html body {
                text-align: center;
                background-color: #E4E4E4;
                margin:50px 0;
            }
            .contenitore {
                margin:auto;
                width: 150px;
                overflow: hidden;
            }
            .blocco {
                width:140px;
                height:140px;
                float: left;
                cursor:pointer;
            }
            .red {
                background-color: red;
            }
            .white {
                background-color: yellow;
            }
            .green {
                background-color: green;
            }
            .spento {
                background-color: #E4E4E4;
            }
        </style>
    </head>
    <body>
        <div class='contenitore'>
            <div class='blocco spento'></div>
            <div class='blocco spento'></div>
            <div class='blocco spento'></div>
        </div>
    </body>
</html>
 

Jakub Lemiszewski

Utente Attivo
5 Dic 2013
119
1
0
CIao grazie delle vostre idee.
Sono state molto utili. Io avevo pensato solo a js senza jquery ma vedo che comunque è una buona soluzione.
Si puo anche risolvere senza gli if in magnera molto basica ma meno elegante.

Comunque mille grazie
 

marino51

Utente Attivo
28 Feb 2013
3.203
207
63
Lombardia
Si puo anche risolvere senza gli if in maniera molto basica ma meno elegante.
come detto nel post, ho usato questa soluzione perché ho trovato difficoltà nel mantenere la sequenza di presentazione dei colori
concentrando le istruzioni nella funzione "TrafficLamp", vorrei dire che viene presa in consegna da un solo "task" del browser,
che la mantiene ad ogni richiamo e ne permette il rispetto della sequenza,

organizzando il codice in altro modo, non sono riuscito a fargli mantenere la sequenza di esecuzione
 
Discussioni simili
Autore Titolo Forum Risposte Data
O Buongiorno a tutti, avrei un quesito a proposito di php e ID PHP 3
Andrea Perrone [Javascript] QUESITO SU FUNZIONI Javascript 28
L Quesito modello dreamwaver HTML e CSS 1
D Piccolo quesito per il mio sito PHP 1
felino Quesito matematico: calcolo ore stimate avendo la percentuale. Discussioni Varie 24
J Quesito su funzione js Javascript 2
D Quesito TOSTO - lista di checkbox flaggati in base ai dati di una tabella PHP 0
D Quesito intrigante tra Altervista e ServerPlan - problemi visualizzazione .... WordPress 3
H [RISOLTO]Quesito form Javascript 5
Sargon Auto_Increment quesito PHP 2
C Contatore visite su Facebook (era: quesito) PHP 2
I Quesito su select PHP 7
S Quesito Leggi, Normative e Fisco 2
N Un piccolo quesito su una lista articoli PHP 1
M quesito su testo dinamico Flash 10
L Quesito SQL MS Access 1
C Quesito su PHP e HTML PHP 7
M quesito per Front page 2000 HTML e CSS 3
M [PHP] Logica esatta sul mostrare contenuto se inattivo con Codeigniter PHP 2
S [WordPress] Creare una select box con partita iva e codice fiscale in base a una logica. WordPress 0
W [PHP] Un dettaglio di logica e approccio sulla sicurezza di un progetto. PHP 9
neo996sps Logica per funzione preventivi: sono sulla strada giusta? PHP 4
D Che logica usare per suddividere immagini per artisti? Database 4
L Logica Assegnazione permessi utenti Ajax 2
S Errore di logica Flash 1

Discussioni simili