修改

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'display：none。

这也是客户当地时间。如果你想要一个绝对时间，你需要从Date.getUTCHours（）开始，并为你的Timezone / Locale做偏移。

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; }

根据时间/计划交换div可见性

6 个答案:

修改