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;
}

#one {
   width:500px;
    height:100px;
    background-color:red;
}

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');
            
            currDiv.click(function() {
id = currDiv.attr('id');
                alert('current id: ' + id);
                 jQuery(this).hide();
                  
                 currDiv = currDiv.next();
                
                 timer(8);
                
                
                
});
            
           
            
             stopTimer();
        }

    }, 1000);
}

function stopTimer() {
    clearInterval(GLOBAL_TIMER);
}