根据时间更改div的背景颜色答案

【问题标题】：Change background color of a div according to time根据时间更改div的背景颜色
【发布时间】：2014-05-22 20:41:13
【问题描述】：

我正在尝试创建一个时间表。根据当前时间divbackground-color会发生变化。

日程安排
1) 当当前时间超过预约时间时，将.dngr class 添加到div
2) 当面试还剩 1 小时时，将 .ready class 添加到 div

我正在使用PHP 动态创建页面。 Bootstrap 3 用于 UI 和 moment.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>

上面的代码只会显示name、phonenumber和appointment time。 注意！！ 上面的代码将被放置在一个循环中。在给定的时间会有多个appointments 我保留LIMIT 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 class 添加到已安排的约会中失败，其中当前时间超过了约会时间。

CSS

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

我的问题是我无法让 div 更改背景颜色，也是日程安排工作的第二点。所有这些都应该使用 javascript 完成

【问题讨论】：

ready 和 dngr 类会同时应用于同一个元素吗？如果是这样，您需要将 .dngr 样式稍后放在 CSS 文件中 .ready 之后
比较$('.interviewtime').data('time') < moment().format('YYYYMMDDHHmmss') 似乎是问题的根源。您在这里具体比较的是什么值？
不不，只有傻瓜才会这样做哈哈哈。将在不同的时间应用于 div。正如我在日程安排中提到的那样@Blazemonger
@Blazemonger 是的，这就是我从两者得到的值是 20140409191900 的问题，这是没有连字符和冒号的日期和时间
查看将两个日期字符串存储在ISO 8601 format 中，然后将它们转换为Date 对象以进行真正的比较。

标签： php jquery css twitter-bootstrap momentjs

【解决方案1】：

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

Output the date in PHP using ISO 8601 format:

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

然后将其转换为 JavaScript Date 对象：

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

和compare those two dates:

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

之后，您需要fix your selector。 $(this).parent().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
    };
});

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

【讨论】：

我试过了但没有用，我在条件中设置了一个警报以检查它是否进入条件。弹出警报但背景颜色没有改变没有添加类
更新了答案。您需要自己定义 this 或缩小选择器的范围。
是的。我将 this 和 idate 都用作选择器，但什么也没发生。
idate 不是选择器字符串！您需要在页面某处专门选择一个元素； this（通常）仅在事件处理程序中才有意义。
那怎么选呢？我已经为此绞尽脑汁了 5 个小时，如果不是更多的话。首先，我在$('somequery').parent().addClass('dngr'); 中使用了一个查询，但这也没有用。

【解决方案2】：

如果您以这种方式比较日期，您应该在比较之前将 $('.interviewtime').data('time') 和 moment().format('YYYYMMDDHHmmss') 转换为 int。你可以使用parseInt(String);

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

你在momentjs中有一个API来比较日期：

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

【讨论】：

我试过parseInt($('.interviewtime').data('time')) < parseInt(moment().format('YYYYMMDDHHmmss'))但还是没有结果@edrian

【解决方案3】：

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

【讨论】：

No No php 是孩子们的游戏，我正在避免这种情况，因为用户不会不时刷新页面。因此我使用 jquery
您可以每分钟重新分配一次 div
我相信你的意思是 ajax。这可以做到，但它会一次又一次地ping服务器。不必要的资源利用。服务器应该做其他小鬼的事情

【解决方案4】：

我找到了我自己问题的答案，问题实际上是选择器。感谢@Blazemonger，我找到了一种选择正确 div 的方法

JQuery 代码

var repeater;

function showcurrenttime()
{
    $('.crnttym').text(moment().format('MMMM Do YYYY, h:mm:ss a'));
    $('.interviewtime').each(function (i, el)
    {
        if ($(this).data('time') < moment().format('YYYYMMDDHHmmss'))
        {
            $(this).parent().addClass('dngr');
        };
        if ($(this).data('time') > moment().format('YYYYMMDDHHmmss') && $(this).data('time') < moment().add('h',1).format('YYYYMMDDHHmmss'))
        {
            $(this).parent().addClass('ready');
        };
    });
    repeater = setTimeout(showcurrenttime, 500);
}
showcurrenttime();

我正在回答我自己的问题，因为我设法在一些帮助下解决了这个问题，其他人也可以参考这个问题

【讨论】：