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.

I have this: /

HTML

<div id="container">
    <div class="element" id="el1"><b>element 1</b> <span class="timeout">10</span> seconds</div>
    <div class="element" id="el2"><b>element 2</b> <span class="timeout">1000</span> seconds</div>
    <div class="element" id="el3"><b>element 3</b> <span class="timeout">100</span> seconds </div>
    <div class="element" id="el4"><b>element 4</b> <span class="timeout">10</span> seconds </div>
    <div class="element" id="el5"><b>element 5</b> <span class="timeout">10000</span> seconds</div>
 </div>

Javascript

function timer(selector) {
    var self = $(selector);
    var sec = parseInt(self.find('span.timeout').text());
    console.log(sec)
    order++;
    var actualTime  = $('span.timeout').html();  
    console.log("Original time " + actualTime)
    self.addClass('selec').css('order',order+'');
    var interval = setInterval(function() {
        sec--;
        console.log(sec)
        if (sec >= 0) {
            self.find('span.timeout').text(sec);
        } else if($(this).find('span').text() <= 0) {
            console.log(sec)
            var text =  self.find('span.timeout').text(actualTime);
            console.log(actualTime)
            clearInterval(interval);
        }
        $('.element').each(function(){
            if($(this).find('span').text() == 0){
                $(this).removeClass('selec');
                $(this).css('order','0');
            }
        });     
    }, 1000);

}

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

However, I don't know how to transform the seconds to hour - minute - seconds in real time. What should I do? Thanks

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.

I have this: http://jsfiddle/arglab/m19aojmu/11/

HTML

<div id="container">
    <div class="element" id="el1"><b>element 1</b> <span class="timeout">10</span> seconds</div>
    <div class="element" id="el2"><b>element 2</b> <span class="timeout">1000</span> seconds</div>
    <div class="element" id="el3"><b>element 3</b> <span class="timeout">100</span> seconds </div>
    <div class="element" id="el4"><b>element 4</b> <span class="timeout">10</span> seconds </div>
    <div class="element" id="el5"><b>element 5</b> <span class="timeout">10000</span> seconds</div>
 </div>

Javascript

function timer(selector) {
    var self = $(selector);
    var sec = parseInt(self.find('span.timeout').text());
    console.log(sec)
    order++;
    var actualTime  = $('span.timeout').html();  
    console.log("Original time " + actualTime)
    self.addClass('selec').css('order',order+'');
    var interval = setInterval(function() {
        sec--;
        console.log(sec)
        if (sec >= 0) {
            self.find('span.timeout').text(sec);
        } else if($(this).find('span').text() <= 0) {
            console.log(sec)
            var text =  self.find('span.timeout').text(actualTime);
            console.log(actualTime)
            clearInterval(interval);
        }
        $('.element').each(function(){
            if($(this).find('span').text() == 0){
                $(this).removeClass('selec');
                $(this).css('order','0');
            }
        });     
    }, 1000);

}

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

However, I don't know how to transform the seconds to hour - minute - seconds in real time. What should I do? Thanks

• javascript
• jquery
• html

Share Improve this question Follow asked Feb 15, 2015 at 19:03 agustinagustin 2,41733 gold badges2525 silver badges4040 bronze badges 2

• 1 What do you mean "transform the seconds to hour - minute - seconds in real time"? Try to formulate your question better. – Alexander Dayan Commented Feb 15, 2015 at 19:14
• I have countdowns, they show seconds. Well, I want to show hh:mm:ss format – agustin Commented Feb 15, 2015 at 19:20

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

Just convert the values:

var hours = Math.floor(sec / 3600);
var min = Math.floor((sec - (hours*3600)) / 60);
var seconds = Math.floor(sec % 60);

And concate with your text. But you have to test if hours or minutes are greater than zero to show the descriptor:

var value = seconds;
if(min > 0) {
    if(min == 1) {
       value = " minute " + value;
    } else {
       value = " minutes " + value;
    }
    value = min + value;
}

if(hours > 0) {
    if(hours == 1) {
       value = " hour " + value;
    } else {
       value = " hours " + value;
    }
    value = hours + value;
}    
self.find('span.timeout').text(value);

http://jsfiddle/m19aojmu/14/

You can calculate hours, minutes and seconds simply using division and modulo:

// total seconds
var seconds = 344234;

// calculate seconds
var s = seconds % 60;
// add leading zero to seconds if needed
s = s < 10 ? "0" + s : s;

// calculate minutes
var m = Math.floor(seconds / 60) % 60;
// add leading zero to minutes if needed
m = m < 10 ? "0" + m : m;

// calculate hours
var h = Math.floor(seconds / 60 / 60);

var time = h + ":" + m + ":" + s

JSFiddle here: http://jsfiddle/dcfxnmxc/

here

var minutes = Math.floor(seconds/60);
seconds = seconds - (minutes*60);
var hours = Math.floor(minutes/60);
minutes = minutes - (hours*60);