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
2.931
166
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
2.931
166
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
2.931
166
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
2.931
166
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