timerxx3

by lovromar

HTML

<span id="bar"></span>
<span id="timer">00:05</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;
}

JavaScript

jQuery(document).ready(function() {
    
    jQuery('div').hide();
    
    currDiv = jQuery('#one');
    
    timer(5);
});

// Timer
var GLOBAL_TIMER;

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

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

    }, 1000);
}

function stopTimer() {
    clearInterval(GLOBAL_TIMER);
}