每天下午用Javascript隐藏CSS类答案

【问题标题】：Hide CSS class with Javascript in the afternoon each day每天下午用Javascript隐藏CSS类
【发布时间】：2018-04-08 03:56:36
【问题描述】：

我希望在一天中的几个小时之间使用 Javascript 隐藏 CSS 类或 ID。这是一个菜单，所以假设在下午 12 点之后，菜单每天都会消失，并且可能会在早上 8 点出现。

我已尝试在此处和其他各个地方进行搜索，但找不到解决方案。可能是因为当您搜索“javascript”和“时间”或“小时”时，它会在项目为用户加载时出现在页面上一段时间后删除结果。显然这不是我想要的。

Here is what I am trying:

var H = new Date();
document.getElementById("hour").innerHTML = H.getHours();
var M = new Date();
document.getElementById("mins").innerHTML = M.getMinutes();

完成的 JS 小提琴： http://jsfiddle.net/ft8hz5uf/6/

【问题讨论】：

你尝试了什么？
我尝试搜索如何获取时间并在一段时间后隐藏元素示例：w3schools.com/jquery/jquery_hide_show.asp timeout：jsfiddle.net/MMsML 或此类：setTimeout(function() { $('#mydiv').fadeOut('fast'); }, 1000); // <-- time in milliseconds 但是，我不确定如何让 jQ 或 JS 找到时间然后根据时间隐藏类。我假设我必须设置一个变量？
无论如何，你在这里得到的答案应该可以解决你的问题
@TheMysticalSock 然后请edit 问题并添加您尝试过的内容。如果你不告诉我们，we can't guess。请花一些时间阅读help center、How to Ask 页面以及如何提供minimal reproducible example。
@Hugo 请查看更改:) 虽然不需要反对票，因为我在问从哪里开始。不是让你为我做这项工作......虽然我添加了我的 jsfiddle，但欢迎改进。

标签： javascript jquery css time hide

【解决方案1】：

你可以使用date object的getHours()方法。

var now = new Date();
var hour = now.getHours();
if (hour > 12) {
  //12 to 23:59:59
  $("#before-noon").hide();
  $("#after-noon").show();
} else {
  //00 to 11:59:59
  $("#before-noon").show();
  $("#after-noon").hide();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="before-noon">Before Noon</div>
<div id="after-noon">After Noon</div>

【讨论】：

很好的答案，这是我的最终代码。谢谢！ jsfiddle.net/ft8hz5uf/6/（对不起，我不能投票）

【解决方案2】：

您必须执行一个函数来获取当前时间并验证它是否在您想要的参数内。这应该隐藏或显示类

 function validateTime() {
    const currentHour = new Date().getHours(); // hours from 0 to 23
    if(currentHour > 8  && currentHour < 18){ // true for the hours between 8am and 6pm
        //logic for add class
        $(query).addClass('class');
    } else {
        // logic for remove class
        $(query).removeClass('class');
    }
}

// you can make the function run every minute

setInterval(validateTime, 1000*60);

【讨论】：

AddClass 是简单地将一个类添加到一个对象中，还是如果它以前被隐藏，它是否会显示它？

【解决方案3】：

一个基本的方法可能是：

var hours = new Date().getHours();
if (hours >= 13 && hours <= 19) {
   [do something]
} else {
    [do something else]
}

没有必要提醒小时，在这种情况下，是相对于用户时间的（所以如果在澳大利亚而不是在欧洲，浏览器会显示不同的东西......）如果您正在寻找绝对时间，无论用户的时间如何，您都应该使用服务器端方法。

【讨论】：

因为订单只会在英国，我认为应该没问题，但是是的，好点。我可能会使用 UTC