Trying to get countdown with current time versus the days closing time javascript

Question

http://jsbin.com/ocuceb/6/edit

The above link is where the full code is, I am trying to get a count down timer of how many hours and minutes are left till a business closes.

function countDown() {
  var d = new Date();
  var hour = d.getHours();
    if(hour<10){hour="0"+hour;}
      else if(hour>12){hour=hour - 12;}
      var minutes = d.getMinutes();
    if(minutes<10){minutes="0"+minutes;}
      var seconds = d.getSeconds();
    if(seconds<10){seconds="0"+seconds;}
  var open = weekday[day.getDay()].open.replace(/am/g,'');
  var close = weekday[day.getDay()].close.replace(/pm/g,'');
  open = parseInt(open,10);
  close = parseInt(close,10); 
 //confused here!  
   var timeClose = close;
   var timeRemaining = Math.floor(d.getHours() - timeClose);
   document.write('<br><br>Close At: '+timeClose+"pm<br>Time Remaining:"+timeRemaining);
  }

And that is where I am having the trouble, I can get the time of being opened and the time of being closed. Originally I tried this

 var timeClose = parseInt(close+':00:00',10);
 var difference = Math.floor(d.getDay() - timeClose);

And of course this didn't work, it either said Undefined or NaN I'm not sure how to go about this, the timing is all new to me never needed this though a client asked for this. Where it states the Actual Time, What time they close, and show an image if the time is within the open to close time (basically an Open Neon Sign) and when past closed (a closed Neon Sign)... I figured it would be very simple, though I am having so tricky corners to pass.

Answer 1

JavaScript time does not think in 12-hour format. It thinks in 24-hour format. Change your array of objects to reflect (22 being 10pm):

hours[0]= {open:"8:00:00",close:"22:00:00"};
hours[1]={open:"8:00:00",close:"22:00:00"};
hours[2]={open:"8:00:00",close:"22:00:00"};
hours[3]={open:"8:00:00",close:"22:00:00"};
hours[4]={open:"8:00:00",close:"22:00:00"};
hours[5]={open:"8:00:00",close:"22:00:00"};
hours[6]={open:"8:00:00",close:"22:00:00"};

Also, parsing an int like this could lead to issues:

var timeClose = parseInt(close+':00:00',10);

You should substring everything between the colons to get your desired hours or minutes.

var timeClose = parseInt(open.substring(0,open.indexOf(":")),10);

Also with the way you have it set up, during business hours (or before 10pm), you will always have a negative number because you subtract the current hours from the close time. If it's 8pm and the close time is 10pm, we will have -2 hours remaining? Switch the operands to subtract getHours from time instead:

var timeRemaining = Math.floor(timeClose - d.getHours());

After that, you can probably check timeRemaining for a negative value. If it is negative, that means the business is closed, and you can modify your output message to reflect as such, i.e.

var timeRemaining = Math.floor(timeClose - d.getHours());
if (timeRemaining < 0) {
    output = "Sorry we are closed already";
} else {
    output = "You have " + timeRemaining + " to come in and shop till you drop";
}

Answer 2

I think a simpler way to do this would be something like this

var now=new Date();
var closing=new Date(now.getFullYear(),now.getMonth(),now.getDate(),21);//Set this to 10:00pm on the present day
var diff=closing-now;//Time difference in milliseconds
if(now.getHours<7){
  //It's before opening time
}
else if(diff<0){
  //It's after closing time
}
else{
  var hours=Math.floor(diff/(1000*60*60));
  diff=diff%(1000*60*60);
  var mins=Math.floor(diff/(1000*60));
  diff=diff%(1000*60);
  var secs=Math.floor(diff/(1000));
}

Here is a reference on the time object https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date