How to get time till timeout using js or jquery

Question

I want to add a class based on certain time, if the time goes out, then the class will automatically be removed. I tried repeatedly, but couldn't figure it out as I'm new to JavaScript/jQuery. I tried googling for a solution, but couldn't find anything, which led me to StackOverflow. Please refer to my code below.

$(document).ready(function() {
  var hr = new Date().getHours();
  // I want execute this at 20:00 till 04:00
  if (hr < 20) {
    $('#tahajud').addClass('opened-for-codepen');
  }
  // I want execute this at 04:00 till 06:00
  if (hr < 4) {
    $('#fajr').addClass('opened-for-codepen');
  }
  // I want execute this at 08:00 till 10:00
  if (hr < 8) {
    $('#dhuha').addClass('opened-for-codepen');
  }
});

Answer 1

I think this will do what you want:

$(window).on('load', function(){
  let hr = new Date().getHours(),
      cls = 'opened';

  // I want execute this at 20:00 till 04:00
  $('#tahajud').toggleClass(
    cls, 
    (hr >= 20) || (hr < 5)
  );

  // I want execute this at 04:00 till 06:00
  $('#fajr').toggleClass(
    cls,
    (hr >= 4) && (hr < 6)
  );

  // I want execute this at 08:00 till 10:00
  $('#dhuha').addClass(
    cls, 
    (hr >= 8) && (hr < 10)
  );
});

It uses toggleClass() which can take a yesOrNo expression/function as a second param. If it's true, adds the class. If not, it removes it.

Also, your conditions were a bit off. You don't need to check for minutes, since you always apply the class at sharp hour. Pay attention to my conditions, I'm sure they'll make sense.

To see it in action:

$(window).on('load', function(){
  let hr = new Date().getHours(),
      cls = 'opened';

  // I want execute this at 20:00 till 04:00
  $('#tahajud').toggleClass(
    cls, 
    (hr >= 20) || (hr < 5)
  );

  // I want execute this at 04:00 till 06:00
  $('#fajr').toggleClass(
    cls,
    (hr >= 4) && (hr < 6)
  );

  // I want execute this at 08:00 till 10:00
  $('#dhuha').addClass(
    cls, 
    (hr >= 8) && (hr < 10)
  );
});

#tahajud span::before,
#fajr span::before,
#dhuha span::before {
  content: 'closed for codepen.';
}
#tahajud.opened span::before,
#fajr.opened span::before,
#dhuha.opened span::before {
  content: 'openend for codepen.';
  color: #382;
}
span {
  color: #f50;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tahajud">Tahajud is now <span></span></div>
<div id="fajr">Fajr is now <span></span></div>
<div id="dhuha">Dhuha is now <span></span></div>

Answer 2

You can use a series of if and else if to check if your hr falls between the times you want. The CSS is important as it defaults all the div to hidden by default and the class displays whatever div it is added to.

$(document).ready(function() {
  var hr = new Date().getHours();

  // fluff for the example
  $('body').prepend('Setting class for hour ' + hr + '...');


  // adds the class by calling the function after 1.5 seconds
  setTimeout(setCodepenClass.bind(null, hr), 1500);
});

function setCodepenClass(hr) {

  // Adds the class if time is between 04:00 (inclusive) and 06:00 (exclusive)
  if (hr >= 4 && hr < 6) {
    $('#fajr').addClass('opened-for-codepen');
  }
  // Adds the class if time is between 08:00 (inclusive) and 10:00 (exclusive)
  else if (hr >= 8 && hr < 10) {
    $('#dhuha').addClass('opened-for-codepen');
  }
  // Adds the class if time is between 20:00 (inclusive) and 04:00 (exclusive)
  else if (hr >= 20 || hr < 4) {
    $('#tahajud').addClass('opened-for-codepen');
  }
}

div {
  display: none;
}

.opened-for-codepen {
  background: #333;
  border: 2px solid #222;
  color: white;
  display: block;
  font-weight: bold;
  margin: 2em;
  min-width: 200px;
  min-height: 75px;
  padding: 2em;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tahajud">tahajud</div>
<div id="fajr">fajr</div>
<div id="dhuha">dhuha</div>