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

时间:2015-10-28 17:19:35

标签: javascript jquery html onload

尝试创建一个网站,该网站将显示4个超链接中的3个,直到一天的特定时间,例如从04:00到23:00可见link1link2link3。在此时间link1之后,link2link3被隐藏,只有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
}
&#13;
<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>
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:0)

您可以使用适当的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>。您也可以为链接使用有序或无序列表。

我已使用{{1>} link_area 识别出重要的阻止,并选择了一个类名 timed_links 来识别内容有 - 一组基于时间的链接 请注意,每个链接都有一个之夜类,以供其显示。如果应始终显示,则链接可以同时具有之夜的类。

现在根据一些规则设置样式 - day 链接不应该在晚上显示, night 链接不应该在白天显示。

id

这就是说,&#34;在 timed_links 类型的节点中也有类 day ,选择一个带有类的.timed_links.day a.night, .timed_links.night a.day { display: none; } 晚上并且不显示它&#34; ...并在 night 容器中为链接执行相同操作。

这将隐藏链接5的日间和夜间课程的链接,因此我们还必须坚持显示日+链接显示和夜间+夜间链接显示 - 这必须来自之后以上CSS规则:

a

现在,您所要做的就是在右侧元素(包含链接的.timed_links.day a.day, .timed_links.night a.night { display: initial; } 块)上设置正确的类 day night 。使用相同的javascript策略检查时间,但只需在容器中添加一个类。

class="timed_links"

当DOM准备就绪时,这样做一次......

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

通过设置计时器并更改 timed_links 容器上的类,您甚至可以在页面空闲时定期执行此操作。

请参阅我在此处撰写的文章中创建的fiddle

答案 1 :(得分:0)

我呼吁这个背景。 (几乎是自解释代码..)

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