Javascript Count Up Timer

Question

我正在尝试创建一个javascript计时器，在启动时，开始计数。计时器只是从单击开始按钮到单击结束按钮时的可视参考。

我发现一个在线插件可以完美地计数，但我正在尝试修改它来计算。

我在未来对日期方式进行了硬编码。我现在正试图让计时器开始计算到那个日期。每次单击开始按钮时都会重置此项。

这是我正在使用的功能。它可以很好地倒数，但我无法弄清楚如何扭转它。

我认为差异是如何计算的，但我相信它确实发生在//calculate dates部分。

是否有一种简单的方法可以反转这个数学并将其计算在内？

小提琴：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

这个OP已经有了答案，但是时区存在问题，所以这个答案。

DownVoters关注评论。

试试这个。 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/>