根据时间/时间表交换 div 可见性

Question

在我的页面上，我有两个div... 一个div我希望从上午10点到下午6点（服务器时间）可见...和剩余时间的另一个div。

我尝试了一堆搜索来找到某种javascript或jquery内容交换器，但没有任何运气..感谢您的任何建议？

<div id="day">content</div>
<div id="night">content</div>

我只能使用以下 php 来让它工作：

<?php
$hour = strftime("%H");
if ($hour >= 02 && $hour < 05)
{
echo '<div id="div1">content block one </div>';
}
else
{
    echo '<div id="div2">content block two</div>';
}?>

但是，如果我想从晚上 8 点到凌晨 4 点显示div，这个解决方案似乎不起作用...... 这是因为它跨越了不止一天吗？感谢您的任何建议。

Answer 1

编辑

您在评论中提到的案例是一个棘手的案例。所以这是我修改后的答案：

<?php
    $t0 = 20;        // from hour (inclusive) -- int, 0-23
    $t1 = 4;         // till hour (excluding) -- int, 0-23
    $t  = date('G'); // current hour (derived from current time) -- int, 0-23
    if ($t0 == $t1) {
        $in_range = NULL;
    } elseif ($t0 < $t1) {
        $in_range = ($t0 <= $t && $t < $t1);
    } else {
        $in_range = ($t1 <= $t && $t < $t0) == false;
    }
    /*
    echo $in_range === NULL
        ? 'from and till dates must be different'
        : ($in_range ? 'just in time' : 'wait till the time is right');
    */
    if ($in_range === false) {
        $s0 = mktime($t0, 0, 0); // lunch time
        $s  = time();            // current time
        if ($s0 < $s) {
            $s0 += 60 * 60 * 24; // late for lunch! now wait till tomorrow
        }
        $d0 = $s0 - $s;
        $dh = floor($d0 / 60 / 60);
        $dm = $d0 - $dh * 60 * 60; $dm = floor($dm / 60);
        $ds = $d0 - $dh * 60 * 60 - $dm * 60;
        echo sprintf("
            Current date...: %s<br />
            Target date....: %s<br />
            Time to go.....: %d hours, %d minutes, %d seconds
            ",
            date("Y-m-d h:i:s A", $s),
            date("Y-m-d h:i:s A", $s0),
            $dh,
            $dm,
            $ds
        );
    }
?>

Answer 2

如果需要根据服务器时间设置可见性，则应在服务器端显示和隐藏div。因为没有JavaScript可以获取服务器时间，而是客户端（可能位于远程位置）浏览器。

如果您的站点中有一个可以返回服务器时间的脚本，那么您可以实现这一点，但我认为从头开始有条件地标记 HTML（php、jsp 等）代码会更明智。

Answer 3

只需将$(document).ready()处理程序与Date()一起使用（例如。 getHours()方法），就像我对以下代码所做的那样：jsfiddle.net/c2TPZ。默认情况下，您可以隐藏这两个块，除非您的JS设置了CSS样式使它们可见，例如。喜欢这个：

$('#box1').css({display: 'block'}); // sets display to 'block', eg. from 'none'

Answer 4

我通常建议在服务器上执行此操作，但在 Javascript 中它看起来像这样：

var pHour = Date.getHours();
if ((pHour >= 10) && (pHour < 18))
{
  $('.scheduled-target').show();
}

这假设您默认将".scheduled-target"显示：none。

这也是针对客户端的当地时间。 如果你想要一个绝对的时间，你需要从Date.getUTCHours（）开始，并对你的时区/区域设置进行偏移。

Answer 5

$(document).ready(function() {
  var d = new Date();
  if (d.getHours() >= 10 && d.getHours() < 18) {
    $(#div1).show();
    $(#div2).hide();
  }
  else {
    $(#div1).hide();
    $(#div2).show();
  }
});

编辑：哎呀，我错过了关于服务器时间的部分。 这不可靠。 相反，您应该使用服务器端脚本设置它们。不知道你在服务器端使用什么，但例如在 PHP 中：

$hour = strftime("%H");
if ($hour >= 10 && $hour < 18)
{
  $div1_class = "show";
  $div2_class = "hide";
}

在你的css中，类.hide是display: none;

Answer 6

从理论上讲，它就像这样简单：

.HTML

<div class="h h10-6">10-6</div> <div class="h h-other">other time of day</div>

JavaScript

current_hour = <? some_server_side_code_to_get_the_hour ?>;
if(current_hour >= 10 && current_hour < 18) $('.h10-6').show(); else $('.h-other').show();

.CSS

.h { display: none; }

Answer 7

我用了这个

<?php 
    date_default_timezone_set("America/Los_Angeles");
    $rightNow = date("m:d:h:i:sa");  
    //echo $rightNow ;
    //$startHide = date("6:11:02:30:00pm")
    $startHide = date("06:11:02:30:00pm");
    $endHide = date("06:12:05:00:00pm");
    ?>
<? if ($rightNow > $startHide && $rightNow < $endHide): ?>
    
    <style> .hideCertainTimes {
        display:none !important;
        } 
    </style>
<? else: ?>
<? endif; ?>