Question

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

计划的制定
1）当前时间超过预约时间时，将.dngr class添加到div
2）当面试剩余1小时时，将.ready class添加到div

我正在使用PHP动态创建页面。 Bootstrap 3的{{1}}和时钟的UI

PHP代码

moment.js

以上代码只会显示<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

JQuery代码

LIMIT 20

上面的代码将给出当前时间。 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()添加到计划约会失败，其中当前时间超过约会时间。

CSS

.dngr class

我的问题是我无法让div更改背景颜色，也是计划工作的第二点。所有这一切都应该使用javascript完成

Answer 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。 <{1}}不会在该函数中执行任何操作，因为未定义$(this).parent().addClass('dngr');。

可能你需要一个这样的循环：

this

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

Answer 2

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

如果你没有演员表示你正在比较弦乐，那可能就是错误。

你还有一个用于比较日期的时刻的API：

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

Answer 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

Answer 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();

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

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

4 个答案: