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

Show links according to current time on load

本文关键字：时间 显示 链接 加载      更新时间：2023-09-26

尝试创建一个网站，该网站将显示4个超链接中的3个，直到一天中的某个时间，例如从04:00到23:00可见的link1、link2、link3。在此时间之后，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>

您可以通过使用适当的DOM结构和CSS类，使用最少的javascript，更简单地做到这一点。

与您的结构类似，但将链接放在一个容器中，我创建了：

<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_area的id识别了重要块，并选择了一个类名timed_links来识别有什么——一组基于时间的链接
请注意，每个链接都有一个类天或夜，用于显示它的时间。如果链接总是显示的话，它可以同时包含白天和晚上的课程。

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

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

这意味着，"在timed_links类型的节点中，也具有类day，选择一个类night的a，并且不显示它"。。。并且在夜间容器中对白天链接执行相同操作。

这将隐藏一个与日间+夜间类（如链接5）的链接，因此我们还必须坚持日间+日间链接显示和夜间+夜间链接显示——这必须在以上CSS规则之后出现：

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

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

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容器上的类来定期执行此操作。

看看我在这里创作的小提琴。

我对这个上下文的调用。（几乎是不言自明的代码。）

<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();
   });
});
相关文章：