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

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

javascript jquery html

Javascript 根据当前加载时间显示链接,javascript,jquery,html,onload,Javascript,Jquery,Html,Onload,正在尝试创建一个网站，该网站将显示4个超链接中的3个，直到一天中的某个时间，例如链接1、链接2、链接3在04:00–23:00可见。在此时间之后，链接1、链接2、链接3将隐藏，并且在23:00–04:00期间，只有链接4可见我希望这一切都发生在onload事件上，而不是onclick事件上。有人能帮忙吗函数myFunction{ var hour=新日期。getHours；如果小时4{ $link1.show $link2.show $link3.show $link4.0 } 否则{

正在尝试创建一个网站，该网站将显示4个超链接中的3个，直到一天中的某个时间，例如链接1、链接2、链接3在04:00–23:00可见。在此时间之后，链接1、链接2、链接3将隐藏，并且在23:00–04:00期间，只有链接4可见

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

函数myFunction{ var hour=新日期。getHours；如果小时<23 |小时>4{ $link1.show $link2.show $link3.show $link4.0 } 否则{ $link1.0 $link2.0 $link3.0 $link4.show } document.getElementByIdlink1.innerHTML document.getElementByIdlink2.innerHTML document.getElementByIdlink3.innerHTML document.getElementByIdlink4.innerHTML } 你好，世界！

通过使用适当的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>

这意味着，在一个也有上课日的节点类型中，选择一个有上课夜的a，而不显示它。。。当在夜间容器中时，对日间链接执行相同的操作

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

这将隐藏一个白天+晚上的链接，如链接5，因此我们还必须坚持白天+白天链接显示和晚上+晚上链接显示-这必须遵循上述CSS规则：

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

现在，您所要做的就是在正确的元素上设置正确的类，即包含链接的class=timed\u links块。使用相同的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');
}

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

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

请参阅我从这里写的文章中创建的内容。

我对该上下文的调用。几乎是不言自明的代码

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

这个例子到底有什么不起作用呢？当我从javascript调用myFunction时，它对我起作用了。包装函数并调用文档就绪。devlin的小提琴演示。是的，内联事件处理程序（如onload=myFunction）不可用；此外，onload在文档的最后一部分加载完毕后很晚才启动。您需要的是事件，它非常容易与jquery的$document.ready一起使用。。。这太棒了，谢谢，真的很感谢你们的帮助@斯蒂芬普与德夫林