Countup in time frame

Question

I'm trying to count up (a timer of some sort) to the number 2112 between now and tomorrow (March 30 at 21:12PM EST)! I've googled but I'm not sure how to go about it. The plugins/codes I've seen are just countdown plugins which have seconds, minutes, hours, etc.

(function($) {
$.fn.countdown = function(options, callback) {
//custom 'this' selector
thisEl = $(this); 

// array of custom settings
var settings = { 
'date': null,
'format': null
};

// append the settings array to options
if(options) {
$.extend(settings, options);
}

//create the countdown processing function
function countdown_proc() {
var eventDate = Date.parse(settings.date) / 1000;
var currentDate = Math.floor($.now() / 1000);

if(eventDate <= currentDate) {
callback.call(this);
clearInterval(interval);
}

var seconds = eventDate - currentDate;

var days = Math.floor(seconds / (60 * 60 * 24)); 
//calculate the number of days

seconds -= days * 60 * 60 * 24; 
//update the seconds variable with number of days removed

var hours = Math.floor(seconds / (60 * 60));
seconds -= hours * 60 * 60; 
//update the seconds variable with number of hours removed

var minutes = Math.floor(seconds / 60);
seconds -= minutes * 60; 
//update the seconds variable with number of minutes removed

//conditional statements
if (days == 1) { thisEl.find(".timeRefDays").text("day"); } else { thisEl.find(".timeRefDays").text("days"); }
if (hours == 1) { thisEl.find(".timeRefHours").text("hour"); } else { thisEl.find(".timeRefHours").text("hours"); }
if (minutes == 1) { thisEl.find(".timeRefMinutes").text("minute"); } else { thisEl.find(".timeRefMinutes").text("minutes"); }
if (seconds == 1) { thisEl.find(".timeRefSeconds").text("second"); } else { thisEl.find(".timeRefSeconds").text("seconds"); }

//logic for the two_digits ON setting
if(settings.format == "on") {
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;
}

//update the countdown's html values.
thisEl.find(".days").text(days);
thisEl.find(".hours").text(hours);
thisEl.find(".minutes").text(minutes);
thisEl.find(".seconds").text(seconds);
}

//run the function
countdown_proc();

//loop the function
interval = setInterval(countdown_proc, 1000);
};

}) (jQuery);



//Provide the plugin settings
$("#countdown").countdown({
//The countdown end date
date: "30 March 2016 21:12:00",

// on (03:07:52) | off (3:7:52) - two_digits set to ON maintains layout consistency
format: "on"
}, 

function() {
// This will run when the countdown ends
$( ".flash" ).addClass( "show" );
$( "ul#countdown" ).addClass( "hide" );
$( ".black" ).addClass( "new" );


});

This returns 01 Days, 30 Hours, 10 Minutes 5 Seconds.

I really just want 4 numbers, 2112. How can it be done, nautical time?

Answer 1

A basic count up script would look like this: jsfiddle

var second = 1000; // ms
var i = 0;
var timer = setInterval(function() {
   if (i < 2112) {
      i++;
      console.log(i);
   } else {
      clearInterval(timer);
   }
}, second); // <- You'd change this second to some other value.

Then you'd have to take tomorrow's date:

var maxTime = Date.parse('Wed Mar 30 2016 21:12:00 EDT'); 

And today's date:

var timeNow = Date.now();

And subtract the difference:

var timeDiff = maxTime - timeNow;

By formatting it back to a new date, you can play with the JS Date Object's methods to adjust the timer to your specific needs (AKA "nautical time")

var dateDiff = new Date(timeDiff);
console.log(dateDiff.getMinutes());

See the JS Date Object API Docs at: http://www.w3schools.com/jsref/jsref_obj_date.asp or https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse

Then change the second value, at the bottom of that code. It will increment based on whatever amount of time that is passed into it. So if you want 2112 equal parts of time between now & tomorrow, then you'd divide timeDiff / 2112 & feed those results into that value.

Important note: If you do that, then your time increments would be longer than someone else's time increments, when they loaded the code after you finish writing it & testing it out. So you'll have to play with the date object, to figure out what your time increments should be. I recommend making them static & not dynamic. (Avoid using timeDiff / 2112 as the interval).