Question

如何在网页上隐藏按钮12小时？这就是我到目前为止所做的：

var now = new Date();
var millisTill20 = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 20, 0, 0, 0) - now;

if (millisTill20 < 0) {
    millisTill20 += 86400000;
}
console.log('millisTill20 ' + millisTill20);

setTimeout(function() {
    $("#button_online").hide();
}, millisTill20);

在脚本运行的20:00，它会隐藏元素，但是当我刷新页面时按钮会返回。

我遇到了另一个问题，如果用户在20:01来到我的网站，他可以看到按钮，这怎么能修复？我知道这是因为我使用的是客户端脚本，但我无法使用服务器端，因为我使用的是Salesforce。

Answer 1

而不是完成所有开始/结束时间数学，只需获得GMT小时。如果它＆gt; = 20，或者＆lt; 8，隐藏元素。否则，请显示它。

＆＃13;

function checkOnline() {
  var el = document.getElementById('button_online');

  var hours = (new Date()).getUTCHours();

  if ((hours >= 20) || (hours < 8))
    el.style.display = 'none';
  else
    el.style.display = '';
}

// set correct state on page load
checkOnline();

// re-check once per minute
setInterval( checkOnline, 60000 );

＆＃13;

<button id=button_online>button</button>

＆＃13;

Answer 2

我认为你需要对此有所不同。这将在某个时间隐藏按钮但不处理重新加载等。您需要在加载时显示或隐藏它。如果用户打开了页面而不是导航，您的脚本将隐藏按钮。

检查当前时间是否在这些时间之间，然后摆脱按钮：

var d = new Date();
if (d.getHours() >= 20 && d.getHours() < 8) {
    $("#button_online").remove();
}

Answer 3

以下代码将完成这项工作，而不使用setTimeout（）。

var currentDate = new Date();
var currentHour = currentDate.getHours();

if(currentHour>19 || currentHour<9) {
    $("#button_online").remove(); // it is better to remove than hide, beacuse someone on client side can still use the button if it is there.
}

W3上的

getHours（）函数：http://www.w3schools.com/jsref/jsref_gethours.asp

以上代码将删除页面加载时的按钮。

但是可能会出现这样的情况：

它的19:59并且客户端加载了该页面，该按钮未被删除。然后是20:00，但按钮仍然存在，因为页面是在19:59加载的。

如果你想检查这种情况，你可以将上面的代码包装在一个函数中并定期重复：

$(document).ready(function() {
    checkTheTime();
})

function checkTheTime() {
    var currentDate = new Date();
    var currentHour = currentDate.getHours();

    if(currentHour>19 || currentHour<9) {
        $("#button_online").remove(); // it is better to remove than hide, beacuse someone on client side can still use the button if it is there.
    }

    setTimeout(checkTheTime, 1000);// period=1 second;
}

Answer 4

这个很好用

＆＃13;

var b;
function checkBtn(){
     b=setTimeout(checkTime,1000); // check in every second
}
function checkTime(){
    var btn = document.getElementById('btn');
    var d = new Date();
    d = d.getHours();
    if(d >= 20 || d<= 8){
      btn.style.display="none";
      clearTimeout(b);
    }
    else{
      btn.style.display="";
      checkBtn();
    }
}

＆＃13;

<body onload="checkBtn();">
<input type="button" id="btn" />

＆＃13;

Answer 5

以下代码使用setInterval来检查每秒的时间。如果当前小时在8到20之间，它会显示按钮，否则会隐藏它。

＆＃13;

function checkOnlineAvailability() {
  var now = new Date();
  var hour = now.getHours();
  // remove the following line, only present for testing various random hours
  hour = parseInt(Math.random()*24);
  if (hour >= 8 && hour < 20) {
    console.log(hour + 'h is within the available time frame');
    $('#button_online').show();
  } else {
    console.log(hour + 'h is NOT within the available time frame');
    $('#button_online').hide();
  }
}

checkOnlineAvailability();
setInterval(checkOnlineAvailability, 1000);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button_online">ONLINE</button>

＆＃13;

隐藏HTML元素，格林威治标准时间20:00至08:00

5 个答案: