tajmeer666

by lovromar

HTML

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

<span class="start">Start</span>
<span class="reset">Reset</span>
<span class="resume">Resume</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

            currDiv.prev().hide();

            if ($('.pauza').is(':visible')) {
                myTimer(5);
            }
            else {
                myTimer(2);
            }

            currDiv = currDiv.next();

        }
    }, 1000);
}

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

$(".start").click(function () {
    myTimer(4);
});

$(".reset").click(function () {
  clearInterval(timer);
        delete timer.interval;
});


$(".resume").click(function () {
    if (!timer.interval) this.timer;
    alert(timer);
});