Question

我正在开发一个页面，允许员工跟踪他们完成任务所需的时间。有两个按钮，start和stop，用于保存数据库中的实际时间戳。

但是我想给某种类型的视觉计数器，甚至认为来自计数器的数据本身在计时器的启动和停止时没有发言权;它全部基于时间戳。

我发现了一个倒计时插件，我将其推迟，并使其在未来计入日期。一旦他们点击“开始”，计时器就会开始计数。

如果用户要离开并返回，我正试图建立一种从某个时间开始计时器的方法。

例如，如果任务的时间戳为September 1, 2015 at 12:00，则计时器将从4 days x hours x mins开始。

我在名为resume和startTime的插件中添加了一个设置，触发了resumeTimer功能。

关于我如何做到这一点的任何想法？

var globalContainer;

(function($) {

$.fn.upCount = function(options, callback) {
    var settings = $.extend({
        startTime: null,
        offset: null,
        reset: null,
        resume: null
    }, options);

    // Save container
    var container = this;
    globalContainer = container.parent().html();

    /**
     * Change client's local date to match offset timezone
     * @return {Object} Fixed Date object.
     */
    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;
    };

    // Are we resetting our counter?
    if(settings.reset){
        reset();
    }

    // Do we need to start our counter at a certain time if we left and came back?
    if(settings.startTime){
        resumeTimer(new Date(settings.startTime));
    }

    // Define some global vars
    var original_date = currentDate();
    //console.log(currentDate())
    var target_date = new Date('12/31/2020 12:00:00'); // Count up to this date

    // Reset the counter by destroying the element it was bound to
    function reset() {
        var timerContainer = $('[name=timerContainer]');
        timerContainer.empty().append(globalContainer).find('.time').empty().append('00');
    }

    // Given a start time, lets set the timer
    function resumeTimer(startTime){
        alert('Resume Timer Needs to Start From StartTime  ' +startTime)
        // This takes the difference between the startTime provided and the current date.
        // If the difference was 4 days and 25 mins, thats where the timer would start from continuing to count up
    }

    // Start the counter
    function countUp() {

        // Set our current date
        var current_date = currentDate(); 

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

        // based on the date change the refrence wording
        var ref_days = (days === 1) ? 'day' : 'days',
            ref_hours = (hours === 1) ? 'hour' : 'hours',
            ref_minutes = (minutes === 1) ? 'minute' : 'minutes',
            ref_seconds = (seconds === 1) ? 'second' : 'seconds';

        // set to DOM
        container.find('.days').text(days);
        container.find('.hours').text(hours);
        container.find('.minutes').text(minutes);
        container.find('.seconds').text(seconds);

        container.find('.days_ref').text(ref_days);
        container.find('.hours_ref').text(ref_hours);
        container.find('.minutes_ref').text(ref_minutes);
        container.find('.seconds_ref').text(ref_seconds);
    };

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

})(jQuery);


// Resume our timer from a specific time
$('.countdown').upCount({startTime: '09/01/2015 12:00:00', resume: true});

Answer 1

在countUp函数内部，而不是减去original_date，您只需要减去new Date(settings.startTime)。这样你就可以计算传入开始时间的时间差，而不是从打开页面开始的时间。

Working jshint with change.

Answer 2

使用此代码。 秒数是近似值。

var isPaused = false;
var StartDate = new Date('2015', '08', '01', 00, 0, 0) // second parameter is  month and it is from  from 0-1
$('#spanStartDate').text(StartDate);
var Sec = 0,
    Min = 0,
    Hour = 0,
    Days = 0;
var CurrentDate = new Date()
var Diff = CurrentDate - StartDate;
Diff = Diff / 1000
if (Diff > 0) {
    Days = Math.ceil(Diff / (60 * 60 * 24));
    Hour = Math.floor(Diff % (24) / 60);
    Min = Math.floor(Diff % (24 * 60) / 60);
    Sec = Math.floor(Diff % (24 * 60 * 60) / 60);
    console.log(Sec)
}
var counter = setInterval(function () {
    if(isPaused)
        return;
    if (Sec == 0)++Sec;
    else Sec++
    if (Sec == 59) {
        ++Min;
        Sec = 0;
    }
    if (Min == 59) {
        ++Hour;
        Min = 0;
    }
    if (Hour == 24) {
        ++Days;
        Hour = 0;
    }


    $('#timer').text(pad(Days) + " : " + pad(Hour) + " : " + pad(Min) + " : " + pad(Sec));

}, 1000);

function pad(number) {
    if (number <= 9) {
        number = ("0" + number).slice(-4);
    }
    return number;
}


//with jquery
$('.pause').on('click', function(e) {
    e.preventDefault();
    isPaused = true;
});

$('.play').on('click', function(e) {
    e.preventDefault();
    isPaused = false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="play">Play</a>
<a href="#" class="pause">Pause</a>

<br/><br/>

Start Time - &nbsp;&nbsp;&nbsp;&nbsp;<span id="spanStartDate"></span>

<br/>
<br/>Timer (DD:HH:MM:SS) - <span id="timer"></span>

<br/>
<br/>

从here

播放和暂停代码

jQuery Count Up Timer的起点

2 个答案: