0
我在一個頁面上工作，該頁面允許員工跟蹤他們完成任務需要多長時間。有兩個按鈕，即啓動和停止，可以將實際的時間戳保存在數據庫中。帶起點的jQuery向上計時器
但是我想給出一些類型的視覺計數器，即使認爲來自計數器的數據本身在計時器的啓動和停止中也沒有發言權;它的全部基於時間戳。
我發現一個倒計時插件，我倒過來並使它在未來計數到日期的方式。只要他們點擊「開始」，計時器就開始計數。
我想建立一種方式來啓動計時器從一定時間，如果用戶要離開並回來。
例如，如果任務的時間戳爲September 1, 2015 at 12:00那麼定時器將從4 days x hours x mins開始。
我在插件中添加了一個名爲resume和startTime的設置，它觸發了resumeTimer函數。
有關如何做到這一點的任何想法？
這裏是一個小提琴：http://jsfiddle.net/n255xuru/
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});
