timerxx

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').not(':first').hide();
    jQuery('a').hide();

    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) {
            
            jQuery('a').show('slow');
            
             jQuery('a').click(function() {
                 id = jQuery(this).parent('div').attr('id');
                 alert('current id: ' + id);
                 jQuery(this).hide();
                 timer(5);
             });
            
             stopTimer();
        }

    }, 1000);
}

function stopTimer() {
    clearInterval(GLOBAL_TIMER);
}