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

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

Answer 2

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/>