Quesito di logica in js

Jakub Lemiszewski · 5 Feb 2015

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.

Jakub Lemiszewski · 5 Feb 2015

Io ho pensato di risolverlo con delle funzioni con l'if.

marino51 · 6 Feb 2015

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 · 6 Feb 2015

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 · 6 Feb 2015

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 · 6 Feb 2015

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 · 6 Feb 2015

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

Cerca

Cerca

Quesito di logica in js

Jakub Lemiszewski

Utente Attivo

Jakub Lemiszewski

Utente Attivo

marino51

Utente Attivo

marino51

Utente Attivo

marino51

Utente Attivo

Jakub Lemiszewski

Utente Attivo

marino51

Utente Attivo

Discussioni simili