Постоянно проверять время - PullRequest
Новая
       4

Постоянно проверять время

4 голосов
/ 27 сентября 2010

Во-первых, как я могу сделать так, чтобы jQuery постоянно проверял время и добавил id к тегу <div>, если текущее время находится в промежутке между двумя установленными временами? Я делаю часы для школы (где часы - это веб-сайт, отправляемый по кабелю на телевизоры в каждой комнате), где каждый период выражается так: 

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

Я получаю время начала и время окончания от DataMapper , поэтому на самом деле код в представлении (файл eRB): 

<% @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 %>

Мой вопрос заключается в том, как заставить jQuery постоянно проверять текущее время и находится ли оно между @period.start_time и @period.end_time. Если это так, добавьте id="active" к <div>.

Должен ли я настроить что-нибудь для JavaScript для взаимодействия с Ruby через .get?

Если у вас есть какие-либо вопросы, пожалуйста, задавайте.

Ответы [ 2 ]

3 голосов
/ 27 сентября 2010

Вы можете получить это, используя объект Date() Javascript. Пересмотр в связи с уточнением вопроса

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

1012 *

Ссылки для проверки

Пример в реальном времени - http://jsbin.com/okoso3
Живой Пример 2 (Редакция) - http://jsbin.com/okoso3/2
О дате () - https://developer.mozilla.org/en/JavaScript/Reference/global_objects/date

1 голос
/ 27 сентября 2010

Ваша HTML-разметка должна выглядеть примерно так: 

<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>

Ваш javascript будет выглядеть так: 

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);

Определенно, есть способы сделать это лучше, но это сделает работу. Я бы провел время в миллисекундах с начала эпохи, но я предполагаю, что вы основываете активный статус на времени, а не на дате и времени. Если он основан на дате и времени, вы можете передать миллисекунды с эпохи вместо часов и минут.

...