代码之家 › 专栏 › 技术社区 › TMS_1

每天下午用Javascript隐藏CSS类

hide time css jquery javascript

TMS_1 · 技术社区 · 8 年前

我希望在一天中的几个小时内用Javascript隐藏css类或ID。这是一份菜单,比如说在下午12点之后,菜单消失了,每天可能出现在早上8点。

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/

3 回复 | 直到 8 年前

holden 8 年前

基本方法可能是:

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

在这种情况下,没有必要提醒时间是相对于用户时间的(因此,如果在澳大利亚而不是在欧洲,浏览器将显示不同的内容…)

Cristyan 8 年前

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

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

Ozan 8 年前

您可以使用 getHours() 方法 date object .

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>