隐藏格林尼治标准时间20:00至08:00的HTML元素
[英]Hide HTML element from 20:00 to 08:00 GMT
问题描述
How can I hide a button from a web page for 12 hours? 
如何在网页上隐藏按钮12个小时？ This is what I have so far: 这是我到目前为止的内容：
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);
At 20:00 the script runs, it does hide the element but when I refresh the page the button comes back. 在20:00脚本运行时，它确实隐藏了元素，但是当我刷新页面时，按钮又回来了。
I encountered another issue, if a user comes to my website at 20:01 he can see the button, how can this be fixed? 我遇到了另一个问题，如果某个用户在20:01进入我的网站，他可以看到该按钮，该如何解决？ I understand that this is because I'm using a client-side script but I can't use server-side because I'm using Salesforce. 我了解这是因为我使用的是客户端脚本，但是由于使用的是Salesforce，所以无法使用服务器端。
5 个解决方案
解决方案1
1 2017-02-08 14:23:02
Rather than do all the start/end time math, just get the GMT hour. 无需进行所有的开始/结束时间数学运算，只需获取GMT小时即可。 If it's >= 20, or < 8, hide the element. 如果> = 20或<8，则隐藏该元素。 Otherwise, show it. 否则，请显示它。
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 );
<button id=button_online>button</button>
解决方案2
0 2017-02-08 14:13:43
I think you need to think about this a bit differently. 我认为您需要对此有所不同。 This is going to hide the button at a certain time but doesn't handle reloading etc. You need to show or hide it on load. 这将在特定时间隐藏按钮，但不处理重新加载等。您需要在加载时显示或隐藏它。 Your script will hide the button if a user has had the page open and not navigating around. 如果用户打开了页面并且没有四处浏览，则脚本将隐藏该按钮。
Check if the current time is between those hours and then get rid of the button: 检查当前时间是否在这些小时之间，然后取消按钮：
var d = new Date();
if (d.getHours() >= 20 && d.getHours() < 8) {
$("#button_online").remove();
}
解决方案3
0 已采纳 2017-02-08 14:14:59
The below code will do the job, without using setTimeout(). 下面的代码将完成此工作，而无需使用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.
}
getHours() function on W3: http://www.w3schools.com/jsref/jsref_gethours.asp W3上的getHours（）函数： http : //www.w3schools.com/jsref/jsref_gethours.asp
The above code will remove the button on page load. 上面的代码将删除页面加载上的按钮。
But there can be a situation like this: 但是可能会有这样的情况：
It's 19:59 and a client loaded the page, the button is not removed. 现在是19:59，客户端加载了该页面，该按钮未删除。 Then it's 20:00 but the button is still there, because the page is loaded on 19:59. 然后是20:00，但按钮仍然存在，因为页面在19:59加载。
If you want to check this situation too, you can wrap the above code in a function and repeat it periodicly : 如果您也想检查这种情况，可以将上面的代码包装在一个函数中并定期重复执行：
$(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;
}
解决方案4
0 2017-02-08 14:15:07
This one works perfectly fine 这个很好用
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(); } }
<body onload="checkBtn();"> <input type="button" id="btn" />
解决方案5
0 2017-02-08 14:22:45
The below code uses a setInterval to check the time every second. 以下代码使用setInterval每秒检查一次时间。 If the current hour is between 8 and 20 it shows the button, otherwise it hides it. 如果当前时间在8到20之间，则显示按钮，否则将其隐藏。
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);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="button_online">ONLINE</button>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.