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:100%;
    background-color:yellow;
    display:block;  
    position:absolute;
    top:0;
   
}

.box2 {
   width:100%;
    height:100%;
    background-color:red;
     
    display:block;  
    position:absolute;
    top:0;
   }

.box3 {
   width:100%;
   height:100%;
    background-color:green;
  
    display:block;  
    position:absolute;
    top:0;
   
}


.box4 {
   width:100%;
    height:100%;
    background-color:blue;
    
    display:block;  
    position:absolute;
    top:0;
   
}


.pauza {
 display:none;  
 background-color:black;
    color:white;
    width:100%;
    height:100%;
      position:absolute;
    top:0;
  
   
   
   

}

#timer {
font-size:50px;
      z-index:999;
    position:absolute;
    top:100px;
    color:purple;
}

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);
            
            
            if($('.pauza').is(':visible')) {
 myTimer(5);
}
            
            
            
       currDiv.prev().hide();
 currDiv = currDiv.next();
              
            
        } 
    }, 1000);
}






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








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

    
    myTimer(4);
});