Question

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

出于某些原因它在某些时候没有改变，我认为它可能与浏览器时间没有刷新有关，但我不确定。

感谢您给我的任何帮助！

Answer 1

在HTML中，您需要添加用于打开/关闭的符号。我在span标签中使用了符号+和 - 。

如果您想每小时测试一次，您必须使用javascript函数setInterval并停止此过程，您可以使用函数clearInterval。

＆＃13;

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

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

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

1 个答案: