Search code examples
javascriptjqueryhtmlcountdown

Multiple countdowns jQuery and organize them depending the time left

I want to create a website with multiple countdowns activated by a click, some of them have different time, others the same. I need to organize them depending the time left. When one finish I need to return it to his original countdown value, so you can click again.

To understand better (I don't need the effects, I made them only for the example): https://i.sstatic.net/S65dy.gif

I have this: http://jsfiddle.net/m19aojmu/

Each countdown works independently of the others.

HTML

<div class="element" id="el1"><b>Elm 1</b> <span class="timeout">10</span> segundos</div>
<div class="element" id="el2"><b>Elm 2</b> <span class="timeout">100</span> segundos</div>
<div class="element" id="el3"><b>Elm 3</b> <span class="timeout">5</span> segundos</div>

Javascript

function timer(selector) {
    var self = $(selector);
    var sec = parseInt(self.find('span.timeout').text());

    var interval = setInterval(function() {
        sec--;
        if (sec >= 0) {
            self.find('span.timeout').text(sec);
        } else {
            clearInterval(interval);
        }
    }, 1000);
}


$("body").on('click', '.element', function() {
    timer(this);
});

While each countdown have a different id (el1, el2, el3 ...) I don't know to detect which of them finished, therefore I don't know how to add a class when it start and end.

About the ubication, what should I do? Different classes for each location with position absolute?

I know it's a lot, but some help will be great. Thank you very much.

Solution

  • Agusitn you code its like 95% correct, but you are setting the .text() into the sec variable wich is 0 or -1

    Lets change the code a little bit

    First lets take the actual value of the span DOM Element.

        var actualTime  = $('span.timeout').html(); 
   console.log("the actual value when click is " + actualTime)

    Later on the if statement we check when the actual span text its equal to 0

    else if($(this).find('span').text() <= 0) {
            console.log(sec)
            var text =  self.find('span.timeout').text(actualTime);
            console.log(actualTime)
            clearInterval(interval);
        }

    and when the .text() its === to 0, we set the actualTime variable to get back to the actual time.

    here is the JsFiddle