每天下午用Javascript隐藏CSSclass

Question

我希望在一天中的某些时间段内隐藏 css class 或 Javascript 的 ID。这是一个菜单，假设在中午 12 点之后，菜单每天都会消失，并可能在早上 8 点出现。

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

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

完成 JS Fiddle: http://jsfiddle.net/ft8hz5uf/6/

Answer 1

基本方法可能是：

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

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

Answer 2

您可以使用 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>

Answer 3

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

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

每天下午用Javascript隐藏CSSclass

Hide CSS class with Javascript in the afternoon each day

javascript

css

time

jquery

hide