jQuery 根据设置日期显示和/或隐藏元素

Question

我试图在到达保存的开始时间时显示一个名为“oecard”的按钮，然后在到达保存的结束时间后隐藏它。

var db_st = item.DB_ST; // saved in db as '2017-10-02 12:20:00 PM'
var db_et = item.DB_ET; // saved in db as '2017-10-02 12:25:00 PM'

var cd_start = new Date(db_st).getTime(); // converts db date to milliseconds
var cd_end = new Date(db_et).getTime(); // converts db date to milliseconds

var currentdate = $.now();

var loop = setInterval(function(){
  if(currentdate >= cd_start && currentdate <= cd_end) 
  {
    $('#oecard').show();
  }
  else
  {
    $('#oecard').hide();
  }
},1);

我尝试了上面的代码无济于事。 该按钮不会出现在保存的时间，但是当我刷新页面时，它会出现。 结束时间也会发生同样的事情。

我知道这一定是某种逻辑错误。 我需要动态执行此操作而无需刷新页面。

Answer 1

您需要将currentdate放入循环中：

var loop = setInterval(function(){
  var currentdate = $.now();

  if(currentdate >= cd_start && currentdate <= cd_end) 
  {
    $('#oecard').show();
  }
  else
  {
    $('#oecard').hide();
  }
},1);

$.now() 返回的值不是动态的，它不会为您更新，每次调用setInterval回调时都需要调用它。

Answer 2

请使用Date.parse比较日期。 例如

Date.parse('01/01/2011 10:20:45') > Date.parse('01/01/2011 5:10:10')
//true

使用custom events监听做事不刷新的时间。

Answer 3

您可以使用.toggle()在几行中重写代码，例如：

setInterval(function(){
   $('#oecard').toggle($.now() >= cd_start && $.now() <= cd_end);
}, 1);