我正在尝试创建一个时间表。 div
background-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
。
注意.!! 上面的代码将放在一个循环中。在给定的时间会有多个约会
我一直保持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 完成
最佳答案
如果您要比较两个日期,请将它们作为 日期进行比较,而不是作为字符串。 (您可以将它们作为字符串进行比较,但格式化可能会很棘手,而且,如果没有人使用它,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();
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 毫秒)运行一次此代码。一分钟一次就足够了。
关于php - 根据时间更改div的背景颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22966052/