CODEWITHSUNDEEP
javascriptsetinterval
Jason Storey
Jason Storey

Reputation: 469

Use javascript to print out "Open" or Closed depending on time of day in real time

Ok, I have a website for a restaurant. Right now I have a simple if statement in javascript that changes a piece of text from Were open to Were Closed depending on the time of day. But If on a mobile phone when you close your browser it still technically is open in the background. So if you reopen the browser it will say were open after the time it should say were closed until you refresh the page. I would like to find a way to get it to update in real time. I have tried using setInterval and setTimeout to accomplish this as well as a while loop but so far, nothing. I mean when I use setInterval i can print the time and it will increment in real time. So why cant it run my if statement each second and print the desired piece of text.

Here is my code that just displays it as of now.

 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;

I just want it to print our in real time so that I can watch it change from open to close once the time hits it right

Upvotes: 2

Views: 2768

Answers (3)

erdem
erdem

Reputation: 51

  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();

Upvotes: 1

SomeShinyObject
SomeShinyObject

Reputation: 7801

jsFiddle example

New version

I took the liberty of going back and revising this. I think this version will work better

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();

It runs every 15 seconds rather than every 100 milliseconds.

Old Version

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

It updates every 100 milliseconds on the setInterval. You can change it to be faster or slower according to your preference.

Upvotes: 5

Jan Groth
Jan Groth

Reputation: 14636

Less intrusive closure style:

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)

Upvotes: 0

Related Questions