I have a function calls that start a bunch of timers and I want to add a few minutes to each one so they don't all start off at zero. I had success with:

var currentDate = new Date();
var twentyMinutesLater = new Date(currentDate.getTime() + (20 * 60 * 1000));
new CountUp(twentyMinutesLater, 'counter03');

I would love to skip creating the var twentyMinutesLater and so on for all the timers I want, I just can't get the syntax right, or maybe it's not possible. Is there a way to add the milliseconds that in the function call below.

new CountUp(new Date(), 'counter03');

I've tried:

new CountUp((new Date() + (20 * 60 * 1000)), 'counter03');

Result NaN NaN:NaN:NaN so it's not a number Same result with double quotes.

Any javascript syntax masters out there that have any ideas?

I have a function calls that start a bunch of timers and I want to add a few minutes to each one so they don't all start off at zero. I had success with:

var currentDate = new Date();
var twentyMinutesLater = new Date(currentDate.getTime() + (20 * 60 * 1000));
new CountUp(twentyMinutesLater, 'counter03');

I would love to skip creating the var twentyMinutesLater and so on for all the timers I want, I just can't get the syntax right, or maybe it's not possible. Is there a way to add the milliseconds that in the function call below.

new CountUp(new Date(), 'counter03');

I've tried:

new CountUp((new Date() + (20 * 60 * 1000)), 'counter03');

Result NaN NaN:NaN:NaN so it's not a number Same result with double quotes.

Any javascript syntax masters out there that have any ideas?

• javascript
• date
• dateadd

Share Improve this question Follow asked Jan 17, 2012 at 0:03 rd42rd42 3,6041515 gold badges5959 silver badges6969 bronze badges 4

• Well, the two statements are not the same. You've done something different in your example without twentyMinutesLater. Look at the syntax again. – user166390 Commented Jan 17, 2012 at 0:06
• This exact answer with a working jsFiddle demo was already provided to your previous question here (by me): stackoverflow./a/8887920/816620 – jfriend00 Commented Jan 17, 2012 at 0:06
• Duplicate of Javascript count up timer modification. In the future, please edit your previous question to clarify rather than post a new question that is nearly identical. – jfriend00 Commented Jan 17, 2012 at 0:06
• thanks jfriend. the fiddle page is awesome. Now to find my syntax error. It is a bit of a duplicate, but it seemed to me specific enough to start a new question. Should I delete? – rd42 Commented Jan 17, 2012 at 0:10

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

In your specific code, you're passing a Date object to the counter code and that is not what it is expected. It is expecting a time value from which it will make it's own Date object (you can see that right in the constructor for the Counter function). Plus, the counter code won't take times in the future, only times in the past (perhaps because it doens't want to deal with negative times - I don't know).

Here's a working example here where I've modified my other jsFiddle used in the answer to your other question.

function addCounter() {
    var currentDate = new Date();
    var twentyMinutesLater = currentDate.getTime() - (20 * 60 * 1000);
    var div = document.createElement("div");
    div.id = "counter" + counterNum++;
    document.body.appendChild(div);
    new CountUp(twentyMinutesLater, div.id);
}

And, here's a jsFiddle that lets you enter a number of minutes and it will start a counter at that value: http://jsfiddle/jfriend00/vnf5z/.

Something like the following should do:

var d = new Date();
new CountUp(d.setMinutes(d.getMinutes() + 20), 'counter03'); 

Depending on how the CountUp constructor uses the date object passed to it, and whether you want to re-use d, you might need:

var d = new Date();
new CountUp(new Date(d.setMinutes(d.getMinutes() + 20)), 'counter03'); 

so that each call to CountUp gets a different date object.

Just another approach that I've seen been used in Rails. You'd create relative date objects using this syntax,

(20).minutes().fromNow()

Or, if you hate the noise from the parentheses, you could do this (only on ES5 patible browsers),

(20).minutes.fromNow

Here's the first non-ES5 solution that adds methods on the Number prototype.

Number.prototype.minutes = function() {
    // minutes to milliseconds
    return this * 60 * 1000;
};

Number.prototype.fromNow = function() {
    var futureDate = new Date(Date.now() + this);
    return futureDate;
};

new CountUp((20).minutes().fromNow(), 'foo')

Here's the ES5 solution that adds function backed properties.

Object.defineProperties(Number.prototype, {
    minutes: {
        get: function() {
            // minutes to milliseconds
            return this * 60 * 1000;
        }
    },
    fromNow: {
        get: function() {
            var futureDate = new Date(Date.now() + this);
            return futureDate;
        }
    }
});

new CountUp((20).minutes.fromNow, 'foo')

There are different schools of thought on extending of native objects. One group forbids it at any cost, while the other encourage using it almost everywhere. As with anything, striking a balance is important.

new Date() does return an object not the timestamp, so you should'nt use a mathematical operation there(at least no addition, when you expect a Number as result). Use Date.getTime() :

//when you need a Date-object as argument
  new CountUp(new Date(new Date().getTime() + (20 * 60 * 1000)) , 'counter03');
//when you need the timestamp as argument
  new CountUp((new Date().getTime() + (20 * 60 * 1000)) , 'counter03');

See the fiddle to recognize the difference: http://jsfiddle/doktormolle/8v4Tx/