连续检查时间

Question

首先，如何让 jQuery 连续检查时间，并在当前时间介于两个设定时间之间时向

标记添加 id ？我正在为一所学校制作一个时钟（其中时钟是通过电缆发送到每个房间的电视的网站），其中每个周期的表达如下：

<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" 添加到

。

我是否需要为 JavaScript 设置一些东西才能通过 .get 与 Ruby 交互？

如果您有任何疑问，请询问。

Answer 1

您可以使用 Javascript 的 Date() 对象来实现此目的。
由于问题的澄清而进行的修改

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

查看

实时示例的链接 - http://jsbin.com/okoso3
实例 2（修订版）- http://jsbin.com/okoso3/2
关于 Date() - https://developer.mozilla.org/en/JavaScript/参考/global_objects/日期

Answer 2

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

肯定有方法可以做得更好，但这样就可以了。
我会以自纪元以​​来的毫秒为单位传递时间，但我假设您将活动状态基于时间而不是日期和日期。时间。如果它基于日期和时间，您可以传递自纪元以来的毫秒数，而不是小时和分钟。