Javascript Count Up Timer

Question

I am trying to make a javascript timer that when initiated, starts counting up. The timer is just a visual reference from when a start button is clicked to when the end button is clicked.

I found a plugin online which works perfectly for counting down but I am trying to modify it to count up.

I hard coded a date way in the future. I am now trying to get the timer to start counting up to that date. This will be reset every time the start button is clicked.

This is the function I am working with. it works perfectly to count down but I cant figure out how to reverse it.

I thought it was something with how the differece was calculated but I believe it actually happens in the //calculate dates section.

Is there an easy way to reverse this math and have it count up instead?

Fiddle: http://jsfiddle.net/xzjoxehj/

 var currentDate = function () {
        // get client's current date
        var date = new Date();

        // turn date to utc
        var utc = date.getTime() + (date.getTimezoneOffset() * 60000);

        // set new Date object
        var new_date = new Date(utc + (3600000*settings.offset))

        return new_date;
    };

 function countdown () {
        var target_date = new Date('12/31/2020 12:00:00'), // Count up to this date
            current_date = currentDate(); // get fixed current date

        // difference of dates
        var difference =  current_date - target_date;

        // if difference is negative than it's pass the target date
        if (difference > 0) {
            // stop timer
            clearInterval(interval);

            if (callback && typeof callback === 'function') callback();

            return;
        }

        // basic math variables
        var _second = 1000,
            _minute = _second * 60,
            _hour = _minute * 60,
            _day = _hour * 24;

        // calculate dates
        var days = Math.floor(difference / _day),
            hours = Math.floor((difference % _day) / _hour),
            minutes = Math.floor((difference % _hour) / _minute),
            seconds = Math.floor((difference % _minute) / _second);

            // fix dates so that it will show two digets
            days = (String(days).length >= 2) ? days : '0' + days;
            hours = (String(hours).length >= 2) ? hours : '0' + hours;
            minutes = (String(minutes).length >= 2) ? minutes : '0' + minutes;
            seconds = (String(seconds).length >= 2) ? seconds : '0' + seconds;

        // set to DOM
        // 
    };

    // start
    var interval = setInterval(countdown, 1000);
};

how do you count UP to a date in the future. the difference decreases in the standard non wibbly wobbly linear experience of time — Jaromanda X
– Jaromanda X, Commented Sep 4, 2015 at 4:10
I figured if you have an end date and a beginning date, it would count up until it reached the end date. — SBB
– SBB, Commented Sep 4, 2015 at 4:12
no, the fiddle only has a future end date, no past start date — Jaromanda X
– Jaromanda X, Commented Sep 4, 2015 at 4:14

Drazen Bjelovuk · Accepted Answer · 2015-09-04 05:51:30Z

1

JSFiddle

var original_date = currentDate();
var target_date = new Date('12/31/2020 12:00:00'); // Count up to this date
var interval;

function resetCountdown() {
    original_date = currentDate();
}

function stopCountdown() {
    clearInterval(interval);
}

function countdown () {
        var current_date = currentDate(); // get fixed current date

        // difference of dates
        var difference = current_date - original_date;

        if (current_date >= target_date) {
            // stop timer
            clearInterval(interval);

            if (callback && typeof callback === 'function') callback();

            return;
        }

        // basic math variables
        var _second = 1000,
            _minute = _second * 60,
            _hour = _minute * 60,
            _day = _hour * 24;

        // calculate dates
        var days = Math.floor(difference / _day),
            hours = Math.floor((difference % _day) / _hour),
            minutes = Math.floor((difference % _hour) / _minute),
            seconds = Math.floor((difference % _minute) / _second);

            // fix dates so that it will show two digets
            days = (String(days).length >= 2) ? days : '0' + days;
            hours = (String(hours).length >= 2) ? hours : '0' + hours;
            minutes = (String(minutes).length >= 2) ? minutes : '0' + minutes;
            seconds = (String(seconds).length >= 2) ? seconds : '0' + seconds;

        // set to DOM
        // 
    };

    // start
    interval = setInterval(countdown, 1000);
};

edited Sep 4, 2015 at 5:51

answered Sep 4, 2015 at 4:18

Drazen Bjelovuk

5,5626 gold badges44 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

13 Comments

SBB Over a year ago

I am trying to get this to work but from looking at it, it seems that var difference = current_date - original_date; is using currentDate for both vars?

Drazen Bjelovuk Over a year ago

Sure, but currentDate() returns a new a new date every interval. original_date remains unchanged.

SBB Over a year ago

ah that makes sense - this is just what I needed. Thanks so much!

J Santosh Over a year ago

In your fiddle. i gave target time to var target_date = new Date('09/04/2015 9:55:00'); an timer doesn't stop it is continuing.

Drazen Bjelovuk Over a year ago

@JSantosh Seems the currentDate() function returns a date for a specific timezone, so unless you're in that timezone, chances are it's not going to work properly.

|

J Santosh · Accepted Answer · 2015-09-04 05:50:30Z

This OP already has an answer but that has issue with timezone , so this answer.

DownVoters care to comment.

Try this. Fiddle

var TargetDate = new Date('2015', '08', '04', 11, 11, 30) // second parameter is  month and it is from  from 0-11
$('#spanTargetDate').text(TargetDate);
$('#spanStartDate').text(new Date());
var Sec = 0,
    Min = 0,
    Hour = 0,
    Days = 0;
var counter = setInterval(function () {
    var CurrentDate = new Date()
    $('#spanCurrentDate').text(CurrentDate);
    var Diff = TargetDate - CurrentDate;
    if (Diff < 0) {
        clearInterval(counter);
        $('#timer').text('Target Time Expired. test in fiddle')
    } else {
        ++Sec;
        if (Sec == 59) {
            ++Min;
            Sec = 0;
        }
        if (Min == 59) {
            ++Hour;
            Min = 0;
        }
        if (Hour == 24) {
            ++Days;
            Hour = 0;
        }
        if (Sec <= Diff) $('#timer').text(pad(Days) + " : " + pad(Hour) + " : " + pad(Min) + " : " + pad(Sec));
    }
}, 1000);

function pad(number) {
    if (number <= 9) {
        number = ("0" + number).slice(-4);
    }
    return number;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Target Time - &nbsp;&nbsp;<span id="spanTargetDate"></span>

<br/>
<br/>Start Time - &nbsp;&nbsp;&nbsp;&nbsp;<span id="spanStartDate"></span>

<br/>
<br/>Current Time - <span id="spanCurrentDate"></span>

<br/>
<br/>Timer (DD:HH:MM:SS) - <span id="timer"></span>

<br/>
<br/>

Collectives™ on Stack Overflow

Javascript Count Up Timer

2 Answers 2

13 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

13 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related