根据时间更改div的背景色

Question

我正在尝试创建一个时间表。根据当前时间，div背景色将发生变化。

工作的时间表
1）当当前时间超过预约时间添加. dngr类到div
2）当面试剩余1小时时添加。代码>到div

我正在使用PHP动态创建页面<代码>引导3用于UI和时刻。用于时钟的js

PHP代码

<div class="col-md-3">
    <div class="thumbnail">
        <i class="glyphicon glyphicon-user"></i> <?php echo $name;?> <a href="#" data-toggle="modal" data-target="#<?php echo $u_id;?>" class="pull-right btn btn-primary view" data-placement="top" title="Click to view Resume"><i class="glyphicon glyphicon-eye-open"></i></a>
        <hr class="no-margin-top-bottom">
        <i class="glyphicon glyphicon-phone"></i> <?php echo $phone; ?>
        <br/><span class="interviewtime" data-time="<?php echo date('YmdHis', strtotime($schedule));?>"><i class="glyphicon glyphicon-time"></i> <?php echo date('F jS Y, h:i a', strtotime($schedule)); ?> </span>
    </div>
</div>

上面的代码将只显示姓名、电话号码和约会时间。笔记上面的代码将被放置在一个循环中。在给定的时间内，将有多个约会，我保持限制20

jQuery代码

var repeater;

function showcurrenttime()
{
    $('.crnttym').text(moment().format('MMMM Do YYYY, h:mm:ss a'));
    repeater = setTimeout(showcurrenttime, 500);

    if ($('.interviewtime').data('time') < moment().format('YYYYMMDDHHmmss'))
    {
        $(this).parent().addClass('dngr');
    }       
}
showcurrenttime(); 

上述代码将给出当前时间。if（）条件是添加的尝试失败。dngr类到计划约会，其中当前时间超过约会时间。

CSS

.dngr{background-color: #D9534F;border-color: #D43F3A;color: white}
.ready{background-color: #128666;color: white} 

我这里的问题是我不能让div改变背景颜色，这也是日程安排的第二点。所有这些都应该使用javascript来完成




Answer 1

<?php
$appointment_time = you appointment time stamp
$current_time = current time

$class = '';

if($appointment_time < $current_time)
{
$class = 'dngr'
}
?>
<div class="<?php echo $class; ?>"></div>

您可以像这样应用css类，而无需添加js

Answer 2

如果您以这种方式比较日期，则应强制转换$（'.interviewtime'）。数据（“时间”）和时刻（）。比较前将（'YYYYMMDDHHmmss'）格式设置为int。您可以使用parseInt（String）；

如果不强制转换，则是在比较字符串，这可能就是错误所在。

此外，momentjs中还有一个用于比较日期的API：

moment().diff(Moment|String|Number|Date|Array);

Answer 3

如果要比较两个日期，请将它们作为日期而不是字符串进行比较。（您可以将它们作为字符串进行比较，但格式可能很复杂，如果没有人使用它，Date对象是什么？）

使用ISO 8601格式以PHP输出日期：

data-time="<?php echo date('c', strtotime($schedule));?> 

然后将其转换为JavaScriptDate对象：

var idate = new Date($('.interviewtime').data('time'));
var now = new Date();

比较这两个日期：

if (idate.getTime() < now.getTime())

之后，您需要修复您的选择器。$（this）.家长（）. addClass（'dngr'）；不会在该函数中执行任何操作，因为没有定义this。

可能你需要这样的循环：

$('.interviewtime').each(function(i,el) {
    var idate = new Date($('.interviewtime').data('time'));
    var now = new Date();
    if (idate.getTime() < now.getTime()) {
        $(this).parent().addClass('dngr'); // 'this' is the current .interviewtime
    };
});

也就是说，似乎没有理由每半秒钟（500ms）运行这段代码。一分钟一次应该足够了。