Toggle CSS Classes Of An Element Every 12 Hours - jQuery Time Change

Time Change is a minimal jQuery script that automatically toggle CSS classes of an element depending on the current time (before or after 12 o'clock). 

You can use this in your site when you want to encourage users to login or to do something from your site frequently (which might be before or after 12 o'clock).

How to use it:

1. Load the necessary jQuery library (slim build) in the document.

<script src="/path/to/cdn/jquery.slim.min.js"></script>

2. The main script to add and remove CSS classes from an element depending on the current time.

$(document).ready(function(){
  let date1 = new Date();
  let year = date1.getFullYear();
  let hours = 12; 
  let month = date1.getMonth(); 
  let date = date1.getDate(); 
  let date2 = new Date(year,month,date,hours);
  // before 12:00
  if(date1 < date2){ 
   $('body').addClass("before"); 
   $('body').removeClass("after");
  }
  // after before 12:00
  else{
   $('body').addClass("after"); 
   $('body').removeClass("before");
  }
});

3. Apply your own CSS styles to the element.

.before {
  background: red;
  color: white;
}

.after {
  background: blue;
  color: white;
}

---

This awesome jQuery plugin is developed by delight-HK3. For more Advanced Usages, please check the demo page or visit the official website.