其基本前提是有一段代码可以根据设定的时间表(在本例中为上午 9 点到下午 5 点)更改图像，有点像打开和关闭的标志。
到目前为止我的代码是:
<script type='text/javascript'>
$(window).load(function(){
// Translate your hours to UTC, example here is using Central Standard Time (-0500 UTC)
// Opening hour in UTC is 16, Closing hour is 0 the next day
var d = new Date(),
open = new Date(),
closed = new Date();
// Statically set UTC date for open
open.setUTCHours(16);
open.setUTCMinutes(0);
open.setUTCSeconds(0);
open.setUTCMilliseconds(0);
// Statically Set UTC date for closing
closed.setUTCDate(d.getUTCDate()+1); // UTC time rotates back to 0 so we add a day
closed.setUTCHours(0); // UTC hours is 0
closed.setUTCMinutes(0);
closed.setUTCSeconds(0);
closed.setUTCMilliseconds(0);
// Debugging
console.log("user's date:" + d);
console.log("store open time in user's timezone:" + open);
console.log("store close time in user's timezone:" + closed);
console.log(d > open); // user's time is greater than opening time
console.log(d < closed); // is user's time less than closing time (you don't have to go home...)
// Test for store open?
if (d > open && d < closed) {
setOpenStatus(true);
}
else {
setOpenStatus(false);
}
function setOpenStatus(isOpen) {
$('#open').toggle(isOpen);
$('#closed').toggle(!isOpen);
}
});//]]>
</script>
</head>
<body>
<div id="status">
<div id="open"><span title="OPEN"></span></div>
<div id="closed"><span title="CLOSED"></span></div>
</div>
</body>
</html>
但是由于某种原因它在那些时候没有改变，我认为这可能与它不随浏览器时间刷新有关，但我不确定。
感谢您给我的任何帮助!
最佳答案
在 HTML 中，您需要添加用于打开/关闭的符号。我在 span 标记内使用了符号 + 和 -。
如果你想测试每小时的值，你必须使用 javascript 函数 setInterval要停止此过程，您可以使用函数 clearInterval .
// the intervalId
var nIntervId = null;
// for debug purposes
var lastIsOpen = true;
function setOpenStatus(isOpen) {
$('#open').toggle(isOpen);
$('#closed').toggle(!isOpen);
}
// the function to stop the setInterval function
function stopCheckIfClosed() {
if (nIntervId != null) {
clearTimeout(nIntervId);
nIntervId = null;
}
}
// your code:
// I added an optional parameter so that if you call this function
// without the parameter the value false is used, otherwise
// the value passed to the function is used
function checkIfClosed(isInDebugMode) {
var inDebugMode = isInDebugMode || false;
if (inDebugMode) {
if (lastIsOpen) {
lastIsOpen = false;
setOpenStatus(true);
} else {
lastIsOpen = true;
setOpenStatus(false);
}
nIntervId = window.setTimeout(checkIfClosed, 3000, true);
return;
}
var d = new Date();
// Test for store open?
if (d.getHours() >= 9 && d.getHours() <= 17) {
setOpenStatus(true);
// wait for the 17
nIntervId = window.setTimeout(checkIfClosed, (17 - 9)*60*60*1000, true);
} else {
setOpenStatus(false);
// wait for the 9
nIntervId = window.setTimeout(checkIfClosed, (17 - 9)*60*60*1000, true);
}
}
$(function () {
// on document ready call your function: with no arguments means no debug
checkIfClosed(true);
// compute if wait for the next 9 or 17
var d = new Date();
var tomorroAtNine = new Date(d.getFullYear(), d.getMonth(), d.getDate() + 1, 9);
var tomorroAtFive = new Date(d.getFullYear(), d.getMonth(), d.getDate() + 1, 17);
var diffToNine = (tomorroAtNine.getTime() - d.getTime()) * 1000;
var diffTofive = (tomorroAtFive.getTime() - d.getTime()) * 1000;
if (diffToNine < diffTofive) {
//nIntervId = window.setTimeout(checkIfClosed, diffToNine, true);
} else {
//nIntervId = window.setTimeout(checkIfClosed, diffTofive, true);
}
// for test pursposes I reduced the interval to 3 seconds
nIntervId = window.setTimeout(checkIfClosed, 1000, true);
});#status div {
font-family:helvetica,arial,sans-serif;
font-size:20px;
font-weight:bold;
}
#status span {
display:inline-block;
text-indent:-12000px;
}
#open,#closed{
display:none;
}
#open span {
background-image: url('http://i.imgur.com/KmGlJgN.png');
width:640px;
height:335px;
}
#closed span {
background-image: url('http://i.imgur.com/YWLrDlm.png');
width:1100px;
height:850px;
}<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<div id="status">
<div id="open"><span title="OPEN">+</span></div>
<div id="closed"><span title="CLOSED">-</span></div>
</div>关于javascript - 打开和关闭的图像交换未在正确的时间更改，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36987160/