tajmeer

by lovromar

HTML

<div id="timer">Tu se prikazuje tajmer</div>

<span class="start">Start</span>
<span class="reset">Reset</span>




<div class="box1"><a href="#">one</a></div>
<div class="pauza">PAUZA</div>
<div class="box2"><a href="#">two</a></div>
<div class="pauza">PAUZA</div>
<div class="box3"><a href="#">three</a></div>
<div class="pauza">PAUZA</div>
<div class="box4"><a href="#">four</a></div>
<div class="pauza">PAUZA</div>

CSS

.box1 {
   width:100%;
    height:100px;
    background-color:yellow;
   
}

.box2 {
   width:100%;
    height:100px;
    background-color:red;
   }
.box3 {
   width:100%;
    height:100px;
    background-color:green;
   
}


.box4 {
   width:100%;
    height:100px;
    background-color:blue;
   
}


.pauza {
 display:none;  
 background-color:black;
    color:white;
}

#timer {
font-size:50px;
}
}

JavaScript

var timer;
 currDiv = jQuery('.box1');


function myTimer(sec) {
    if (timer) clearInterval(timer);
    timer = setInterval(function() { 
        $('#timer').text(sec--);
        if (sec == -1) {
            clearInterval(timer);
            alert('done');
           
               currDiv.show('slow');
            // TIMER ODE u 3pm :D
        //  myTimer(2);
        
 currDiv = currDiv.next();
              
            
        } 
    }, 1000);
}






   jQuery("*[class^='box']").hide();








$(".start, .reset").click(function() {
      

    
    myTimer(4);
});