Continuously Check Time

Firstly, how can I have jQuery continuously check the time, and add an id to a <div> tag if the current time is in between two set times? I'm making a clock for a school (where the clock is a website sent over cable to TVs in every room), where each period is expressed like 开发者_Go百科this:

<div class="period 1">Period 1: 7:32-8:14</div>

I'm getting the start time and end time from DataMapper, so really, the code in the view (an eRB file) is:

<% @periods.each do |@period| %>
<div class="period <%= @period.id %>"><%= @period.string %>: <%= @period.start_time.strftime("%I:%M") %>&ndash;<%= @period.end_time.strftime("%I:%M") %></div>
<% end %>

My question is how I can get jQuery to continuously check the current time, and if it is in between @period.start_time and @period.end_time. If so, add id="active" to the <div>.

Would I have to set up something for JavaScript to interface with Ruby via .get?

If you have any questions, please ask.

You can acheive this using Javascript's Date() object. Revision due to clarification of question

CSS

.active { font-weight: bold; } // Or whatever styling you need

Javascript

var loop = setInterval(function() {
  var d = new Date();
  var dh = d.getHours();
  var cP = 16; 
  /* make cP your earliest period
  earlier than 1600, but that's for it to
  work with the current time for me (8pm) 
  each pass with increment by 1 hour.*/
  $('.period').each(function() {
    if (dh==cP) $(this).addClass('active'); // add active if current
    else $(this).removeClass('active'); // otherwise remove it
    cP++; // Add an hour each loop, assuming each period is 1hr
  });
}, 60000); // 60000 milliseconds = 1 minute update

​

Links to check out

Live Example - http://jsbin.com/okoso3
Live Example 2 (Revision) - http://jsbin.com/okoso3/2
About Date() - https://developer.mozilla.org/en/JavaScript/Reference/global_objects/date

Your HTML markup should resemble this:

<div class="period 1">
  <input type="hidden" name="time" value="7" class="start_time_hour" />
  <input type="hidden" name="time" value="32" class="start_time_min" />
  <input type="hidden" name="time" value="8" class="end_time_hour" />
  <input type="hidden" name="time" value="14" class="end_time_min" />
  Period 1: 7:32-8:14</div>
</div>

Your javascript will look like this:

var elements = $('.period');
function update_status() {
  elements.each(function() {
    var current = new Date();
    var sH = parseInt($(this).find('.start_time_hour').val());
    var sM = parseInt($(this).find('.start_time_min').val());
    var eH = parseInt($(this).find('.end_time_hour').val());
    var eM = parseInt($(this).find('.end_time_min').val());

    if (current.getHours() >= sH && current.getHours() <= eH && current.getMinutes() >= sM && current.getMinutes() <= eM) {
      $(this).setAttr('id', 'active');
    }
  });
}
setInterval(update_status, 1000);

There are definitely ways of doing this better, but this will do the job. I would have passed in the time in milliseconds since epoch but I assume you are basing the active status on time rather than date & time. If it's based on date and time, you can pass in the milliseconds since epoch instead of hours and minutes.