JavaScript 计数计时器

Question

我正在尝试制作一个 JavaScript 计时器，启动后就会开始计数。计时器只是从单击开始按钮到单击结束按钮的视觉引用。

我在网上找到了一个非常适合倒计时的插件，但我正在尝试修改它以进行倒计时。

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

这是我正在使用的功能。它可以完美地倒计时，但我不知道如何扭转它。

我认为这与计算差异的方式有关，但我相信它实际上发生在 //calculatedates 部分。

有没有一种简单的方法可以反转这个数学并让它计数？

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