使用javascript根据一天中的时间实时打印出"Open"或关闭

Question

好的，我有一个餐厅的网站。现在我在javascript中有一个简单的if语句，根据一天中的时间将文本从打开更改为关闭。但是在手机上，当你关闭浏览器时，它在后台仍然是打开的。所以如果你重新打开浏览器它会在你刷新页面之前说我们打开了它应该说我们关闭了。我想找到一种方法，让它实时更新。我已经尝试使用setInterval和setTimeout来完成这一点，以及一个while循环，但到目前为止，什么也没有。我的意思是，当我使用setInterval时，我可以打印时间它会实时递增。那么为什么它不能每秒运行我的if语句并打印所需的文本呢?

这是我的代码，只是显示它到现在。

 var date = new Date().getHours();
 if ((date > 9) && (date < 20) && (day != 0)) {
        y="<span style="color:#07ed11">We're Open!</span>";
    }
    else {
      y="<span style="color:#fc4b1c">Sorry we're Closed.</span>"; 
    }
                    document.getElementById("open-close").innerHTML=y;

我只是想让它实时打印我们这样我就可以看到它从打开到关闭，一旦时间到了

Answer 1

jsFiddle示例

新版本

我冒昧地返回并修改了这个。我想这个版本会更好。

var checkOpenStatus = function () {
    var d = new Date();
    var date = d.getHours();
    var day = d.getDay();
    if ((date > 9) && (date < 20) && (day != 0)) {
        y = "<span style="color:#07ed11">We're Open!</span>";
    } else {
        y = "<span style="color:#fc4b1c">Sorry we're Closed.</span>";
    }
    document.getElementById("open-close").innerHTML = y;
    setTimeout(checkOpenStatus,15000);
};
checkOpenStatus();

每15秒运行一次，而不是每100毫秒运行一次。

旧版本

Try this

var checkOpenStatus = function () {
    var d = new Date();
    var date = d.getHours();
    var day = d.getDay();
    if ((date > 9) && (date < 20) && (day != 0)) {
        y = "<span style="color:#07ed11">We're Open!</span>";
    } else {
        y = "<span style="color:#fc4b1c">Sorry we're Closed.</span>";
    }
    document.getElementById("open-close").innerHTML = y;
}
setInterval(checkOpenStatus,100); //removed anon function

它在setInterval上每隔1毫秒更新一次100。您可以根据您的喜好将其更改为更快或更慢

Answer 2

  var checkOpenStatus =function () {
        var d = new Date();
        var date = d.getHours();
        var min = d.getMinutes();
  if ((date>7 || (date == 7 && min >= 30)) && (date < 22) && (day != 0)) {
           y = "<span style="color:#07ed11">We're Open!</span>";
        } else {
           y = "<span style="color:#fc4b1c">Sorry we're Closed.</span>";
        }
        document.getElementById("open-close").innerHTML = y;
    };
    checkOpenStatus();

Answer 3

非侵入性闭包样式:

var updateElement = function($el) {
    return function updater() {
        $el.text(new Date()); // dummy, your logic goes here...
        setTimeout(updater, 100);
    }
}
var fooUpdater = updateElement($("#foo")); 
setTimeout(fooUpdater,1000)