打开和关闭的图像交换未在正确的时间更改

Open and Closed image swap not changing at correct time

本文关键字：时间 交换 图像      更新时间：2023-09-26

这样做的基本前提是有一段代码可以根据设定的时间表（在本例中为上午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>

相关文章：