Ponavljanje gradiva

Zadatak:

Kreirati web stranicu na kojkoj se nalazi semafor - kao na raskrsnici. Svetla na semaforu treba da se manjeju na isti način kao na bilo kojoj raskrsnici.

Mogući načini rešavanja:

  1. korišćenjem opacity
  2. korišćenjem promene pozadinske boje
  3. korišćenjem slika
  4. ... ima još načina, ali se na jednom bloku časova može uraditi samo jedan ili dva načina ....

Inspiracija za prvi način rešeavanja na času dolazi sa stranice:

Traffic signal light using Javascript (https://javacodepoint.com/traffic-signal-light-using-javascript/)

Ako bi iskoristili istu inspiraciju i za drugi način, samo treba menjanje atributa opacity zameniti menjanjem atrubuta backgroundColor

Jedno od rešenja zadatka urađeno na ovaj način: (semafor.7z)

Ono što ne stižemo da uradimo na času, a ostavljeno je za učenike da pokušaju da urade kod kuće je treći način rada.

Inspiracija za treći način rada dolazi sa stranice:

How to create an automatic traffic light sequence in javascript (https://stackoverflow.com/questions/35920989/how-to-create-an-automatic-traffic-light-sequence-in-javascript)

Dodatni zadatak:

Postaviti dugme ispod semafora. Klikom na dugme treba da se prestane sa normalnim radom semafora i da samo trepće žuto svetlo.

Rešenje jednog od učenika sa časa

// redovan semafor - funkcija
function semafor() {
  var crveno = document.getElementById("crveno");
  var zuto = document.getElementById("zuto");
  var zeleno = document.getElementById("zeleno");
  zeleno.style.opacity = 1;
  x = setTimeout(function () {
    crveno.style.opacity = 0.3;
    zuto.style.opacity = 0.3;
    zeleno.style.opacity = 0.3;
  }, 500);
  y = setTimeout(function () {
    crveno.style.opacity = 0.3;
    zuto.style.opacity = 0.3;
    zeleno.style.opacity = 1;
  }, 1000);
  z = setTimeout(function () {
    crveno.style.opacity = 0.3;
    zuto.style.opacity = 0.3;
    zeleno.style.opacity = 0.3;
  }, 1500);
  a = setTimeout(function () {
    crveno.style.opacity = 0.3;
    zuto.style.opacity = 0.3;
    zeleno.style.opacity = 1;
  }, 2000);
  b = setTimeout(function () {
    crveno.style.opacity = 0.3;
    zuto.style.opacity = 1;
    zeleno.style.opacity = 0.3;
  }, 3000);
  c = setTimeout(function () {
    crveno.style.opacity = 1;
    zuto.style.opacity = 0.3;
    zeleno.style.opacity = 0.3;
  }, 6000);
  d = setTimeout(function () {
    crveno.style.opacity = 1;
    zuto.style.opacity = 1;
    zeleno.style.opacity = 0.3;
  }, 9000);
 e = setTimeout(function () {
    crveno.style.opacity = 0.3;
    zuto.style.opacity = 0.3;
    zeleno.style.opacity = 1;
  }, 12000);
}
var timer = setInterval(function () {
  semafor();
}, 12000);

semafor();
 
// funkcija za trepcuce zuto svetlo
function trepcuce() {
  clearInterval(timer);
  clearTimeout(x);
  clearTimeoutYes;
  clearTimeout(z);
  clearTimeout(a);
  clearTimeout(b);
  clearTimeout(c);
  clearTimeout(d);
  clearTimeout(e);
  zuto.style.opacity = 1;
  f = setTimeout(function () {
    crveno.style.opacity = 0.3;
    zuto.style.opacity = 0.3;
    zeleno.style.opacity = 0.3;
  }, 500);
  g = setTimeout(function () {
    crveno.style.opacity = 0.3;
    zuto.style.opacity = 1;
    zeleno.style.opacity = 0.3;
  }, 1000);

  setInterval(function () {
    trepcuce();
    }, 1000)
   
  }
 
CSS:
#crveno {
    background-color: red;
    height: 200px;
    width: 200px;
    border-radius: 50%;
}
#zuto {
    background-color: yellow;
    height: 200px;
    width: 200px;
    border-radius: 50%;
}
#zeleno {
    background-color: green;
    height: 200px;
    width: 200px;
    border-radius: 50%;
}

div {
    opacity: 0.3;
}
HTML:
<div id="crveno"></div>
    <div id="zuto"></div>
    <div id="zeleno"></div>
    <br><br>
    <button id="trepavice" onclick="trepcuce()">noćni režim</button>
    <script src="akcije.js"></script>
Last modified: Tuesday, 16 December 2025, 10:15 AM