根据当前加载时间显示链接

Question

尝试创建一个站点，该站点将显示 4 个超链接中的 3 个，直到一天中的特定时间，例如link1、link2、link3 从 04:00 – 23:00 可见。此后 link1、link2、link3 被隐藏，只有 link4 可见（从 23:00 – 04:00）。

我希望这一切都发生在 onload 事件而不是 onclick 事件上。有人可以帮忙吗？

function myFunction() {
  var hour = new Date().getHours();
  if (hour < 23 || hour > 4) {
    $("#link1").show()
    $("#link2").show()
    $("#link3").show()
    $("#link4").hide()
  }
  else {
    $("#link1").hide()
    $("#link2").hide()
    $("#link3").hide()
    $("#link4").show()
  }
  document.getElementById("link1").innerHTML
  document.getElementById("link2").innerHTML
  document.getElementById("link3").innerHTML
  document.getElementById("link4").innerHTML
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body onload="myFunction()">
  <h1>Hello World!</h1>
  <a id="link1" href="">Link1</a>
  <a id="link2" href="">Link2</a>
  <a id="link3" href="">Link3</a>
  <a id="link4" href="">Link4</a>
</body>

Answer 1

您可以通过使用适当的 DOM 结构和 CSS classes 来更简单地做到这一点，并且 javascript.

与您的结构类似，但将 link 放入容器中，我创建了：

<div id="link_area" class="timed_links">
    <a href="#" class="day">Link 1</a>
    <a href="#" class="day">Link 2</a>
    <a href="#" class="day">Link 3</a>
    <a href="#" class="night">Link 4</a>
    <a href="#" class="day night">Link 5</a>
</div>

如果您支持 HTML5，则可以使用 <nav> ... </nav> 代替 <div>。您也可以对 link 使用有序或无序列表。

我已经用 link_area 的 id 确定了重要的块，并选择了一个 class 名称 timed_links 来识别 那里有什么 — 一组基于时间的 links.
请注意，每个 link 都有一个 class day 或 night 来表示它应该显示的时间。 link 可以同时显示 class 天和晚上，如果它应该始终显示的话。

现在根据一些规则设置这些样式 — day links 不应在晚上显示，night links 不应在白天显示。

.timed_links.day a.night,
.timed_links.night a.day
{
    display: none;
}

这意味着，"within a timed_links type of node that also has class day, select an a with class night and don't display it" ... 天 link 夜link =61=]容器。

这将隐藏一个 link 白天+夜晚 class 像 link 5，所以我们也必须坚持白天 + 白天 link 显示和 night+night links 表演 — 这必须在之后 CSS 规则：

.timed_links.day a.day, .timed_links.night a.night { display: initial; }

现在您所要做的就是在右侧元素上设置正确的 class、day 或 night， class="timed_links" 包含 link 的块。使用相同的 javascript 策略来检查时间，但只需将 class 添加到容器中。

var hour = new Date().getHours(); if (hour < 23 || hour > 4) { // it's "day" time $('.timed_links').removeClass('night').addClass('day'); } else { // it's "night" time $('.timed_links').removeClass('day').addClass('night'); }

执行一次，当 DOM 准备就绪时...

$('document').ready( function() { var hour = new Date().getHours(); // ... etc ... } );

您甚至可以在页面空闲时定期执行此操作，方法是设置计时器并更改 timed_links 容器上的 class。

查看我根据我在此处编写的片段创建的 fiddle。

Answer 2

我对这个背景的呼吁。（几乎不言自明的代码..）

<body onload="myFunction()">
  <h1>Hello World!</h1>
  <a id="link1" data-min="4" data-max="23" href="">Link1</a>
  <a id="link2" data-min="4" data-max="23" href="">Link2</a>
  <a id="link3" data-min="4" data-max="23" href="">Link3</a>
  <a id="link4" data-min="23" data-max="4" href="">Link4</a>
</body>


$(document).ready(function(){
   $("a").each(function(){
       var min  = $(this).data("min"), max = $(this).data("max");
       var hour = new Date().getHours();
       if(hour>=min && hour=<max) $(this).show();
       else $(this).hide();
   });
});

根据当前加载时间显示链接

Show links according to current time on load

html

javascript

jquery

onload