[英]Change background color of a div according to time
I am trying to create a schedule. 我正在尝试创建时间表。 According to the current time the
div
background-color
will change. 根据当前时间,
div
background-color
将改变。
Working of the schedule 时间表的工作
1) When current time exceeded appointment time add .dngr
class
to the div
1)当前时间超过约会时间时,将
.dngr
class
添加到div
2) When 1 hour is remaining for the interview add .ready
class
to the div
2)面试剩余1小时时,将
.ready
class
添加到div
I am using PHP
to create the page dynamically. 我正在使用
PHP
动态创建页面。 Bootstrap 3
for the UI
and moment.js
for the clock UI
Bootstrap 3
和时钟的moment.js
PHP code 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>
The above code will just display name
, phonenumber
and appointment time
. 上面的代码将只显示
name
, phonenumber
和appointment time
。 Note.!! 注意。!! The above code will be placed inside a loop.
上面的代码将放置在循环中。 There will be multiple
appointments
at a given time i have kept LIMIT 20
在给定的时间会有多次
appointments
我保持了LIMIT 20
JQuery code 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();
The above code will give the current time. 上面的代码将给出当前时间。 The
if()
condition is a failed attempt to add .dngr class
to a scheduled appointment, where the current time exceeds the appointment time. if()
条件是将.dngr class
添加到计划的约会的失败尝试,其中当前时间超过了约会时间。
CSS CSS
.dngr{background-color: #D9534F;border-color: #D43F3A;color: white}
.ready{background-color: #128666;color: white}
My Problem here is i cannot get the div to change background-color, and also the 2nd point of the working of schedule.All this should be done using javascript 我的问题在这里是我无法让div更改背景颜色,也是进度表工作的第二点。所有这些都应使用javascript完成
If you're comparing two dates, then compare them as dates, not as strings. 如果要比较两个日期,则将它们作为日期而不是字符串进行比较。 (You can compare them as strings, but formatting can be tricky and, well, what's a
Date
object for if nobody uses it?) (您可以将它们作为字符串进行比较,但是格式设置可能比较棘手,如果没有人使用,
Date
对象的用途是什么?)
Output the date in PHP using ISO 8601 format : 使用ISO 8601格式以PHP输出日期 :
data-time="<?php echo date('c', strtotime($schedule));?>
Then convert it to a JavaScript Date
object: 然后将其转换为JavaScript
Date
对象:
var idate = new Date($('.interviewtime').data('time'));
var now = new Date();
and compare those two dates : 并比较这两个日期 :
if (idate.getTime() < now.getTime())
After that, you need to fix your selector . 之后,您需要修复选择器 。
$(this).parent().addClass('dngr');
won't do anything in that function because this
is not defined. 因为在该函数什么都不会做
this
没有定义。
Possibly you need a loop like 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
};
});
That said, there seems to be no justification for running this code every half-second (500ms). 也就是说,似乎没有理由每半秒(500毫秒)运行一次此代码。 Once a minute should be enough.
一分钟一次就足够了。
If you are comparing dates in that way, you should cast $('.interviewtime').data('time')
and moment().format('YYYYMMDDHHmmss')
to int before comparing. 如果您以这种方式比较日期,则应在比较之前将
$('.interviewtime').data('time')
和moment().format('YYYYMMDDHHmmss')
为int。 You can use parseInt(String)
; 您可以使用
parseInt(String)
;
If you don't cast you are comparing Strings and that may be the error. 如果不进行转换,则是在比较字符串,这可能是错误。
Also you have an API in momentjs to compare dates: 另外,在momentjs中有一个API可以比较日期:
moment().diff(Moment|String|Number|Date|Array);
<?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>
you can apply css classes like this no need to add js 您可以像这样应用CSS类,无需添加js
I found the answer to my own question the problem was actually the selector. 我找到了我自己的问题的答案,这个问题实际上是选择器。 Thanks to @Blazemonger i found a way to select the right div
感谢@Blazemonger,我找到了一种选择正确的div的方法
JQuery Code 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();
I am answering my own question as i manage to solve it with some help and others can refer to this as well 我正在回答自己的问题,因为我设法在一些帮助下解决了这个问题,其他人也可以参考此问题
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.