代码之家 › 专栏 › 技术社区 › Ethan Turkeltaub

连续检查时间

erb ruby jquery

Ethan Turkeltaub · 技术社区 · 14 年前

首先,如何让jquery连续检查时间,并添加一个 id 到A <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" 到 <分区> .

我需要为javascript设置一些东西以便通过 .get ?

如果您有任何问题,请提问。

2 回复 | 直到 13 年前

Robert 14 年前

您可以使用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
关于日期()。- https://developer.mozilla.org/en/JavaScript/Reference/global_objects/date

Jey Balachandran 14 年前

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

当然有更好的方法,但这会起到作用。从epoch开始,我将以毫秒为单位传递时间,但我假设您是基于时间而不是日期和时间来建立活动状态。如果它是基于日期和时间的,那么您可以用从epoch开始的毫秒来传递,而不是用小时和分钟。