首先,如果当前时间介于两个设定时间之间,如何让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") %>–<%= @period.end_time.strftime("%I:%M") %></div>
<% end %>
我的问题是如何让jQuery持续检查当前时间,以及它是否介于@period.start_time
和@period.end_time
之间。如果是,请将id="active"
添加到<div>
。
我是否需要为JavaScript设置一些内容以通过.get
?
如果您有任何疑问,请询问。
答案 0 :(得分:3)
您可以使用Javascript的Date()
对象来实现此目的。
由于问题澄清而修订
.active { font-weight: bold; } // Or whatever styling you need
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
答案 1 :(得分:1)
您的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);
肯定有更好的方法可以做到这一点,但这可以胜任。 自从纪元以来,我会在几毫秒内通过,但我认为你是按时建立活动状态而不是日期&amp;时间。如果它基于日期和时间,您可以传递自纪元以来的毫秒而不是小时和分钟。