timerxx4x

by lovromar

HTML

<span id="bar"></span>
<span id="timer">00:03</span>

<span class="lol">START</span>
<div id="one"><a href="#">one</a></div>
<div id="two"><a href="#">two</a></div>
<div id="three"><a href="#">three</a></div>
<div id="four"><a href="#">four</a></div>

CSS

#bar {
  display: block;
  background: #000;
  height: 9px;
  width: 25px;
}
span {
    display:block;
}

JavaScript

jQuery('div').hide();
     jQuery('#timer').hide();
   jQuery(".lol").click(function() {
   currDiv = jQuery('#one');
       jQuery('#timer').show();
       jQuery('.lol').hide();
    
  timer(3);

});

  
        
  


// Timer
var GLOBAL_TIMER;



function timer(intCount) {
    GLOBAL_TIMER = setInterval(function() {
        
        

        var intTickLength = 3;
    
        jQuery('#bar').css('width', intCount * intTickLength + 'px');
        jQuery('#timer').html('00:0' + intCount--);
            
        if (intCount < 0) {
            
            
            
            currDiv.show('slow', function() {
id = currDiv.attr('id');
                // alert('current id: ' + id);
                 //jQuery(this).hide();
                 
                 currDiv = currDiv.next();
                 timer(8);
});
            
            
            
             stopTimer();
        }

    }, 1000);
}

function stopTimer() {
    clearInterval(GLOBAL_TIMER);
}