创建一个函数来检查商家是否营业并将文本写入 html

Question

我想创建一个脚本来检查时间是否在工作日上午 10 点到晚上 10 点之间以及周末上午 10 点到午夜之间。完成此操作后，我最终想要它，以便它会在网站上显示“我们一直营业到（取决于是否是工作日）”或“我们在上午 10 点营业”（如果它们关闭）。当我尝试时，警报框是暂时的并弄清楚这一点。这是我到目前为止所拥有的。

我已经编辑了 CrakC 指出的错误，我现在正在尝试向 id 为“areWeOpen”的 div 添加文本

这也应该在头部还是身体？它应该在浏览器读取 id 之前调用，对吧？

			function checkIfOpen() {
			  var now = new Date();
			  var day = now.getDay();
			  var time = now.getHours();
			  var open, weekday, ;
			  var closed = "We will open at 10Am";
			  var openWeekday = "We are open till 10Pm";
			  var openWeekend = "We are open till midnight";

			  if (time >= 10) {
			    var open = true;
			  } else {
			    var open = false;
			  }

			  if (day >= 1 && day <= 4) {
			    var weekday = true;
			  } else {
			    var weekday = false;
			  }
			  if (open === true && weekday === true) {
			    document.getElementById('areWeOpen').innerHTML(openWeekday);
			  } else if (open === true && weekday === false) {
			    document.getElementById('areWeOpen').innerHTML(openWeekend);
			  } else {

			    document.getElementById('areWeOpen').innerHTML(closed);
			  }
			};
			checkIfOpen();

Answer 1

只需设置关闭时的默认值，然后根据检查更改这些值，即可节省多行代码。这也更具可读性和可维护性。

innerHTML

和

textContent

是属性，而不是方法。这意味着您将事物分配给它们，而不是像您尝试的那样尝试使用括号来调用它们。但是，如果您只是插入文本，那么您应该使用

textContent

。

(function checkIfOpen() {
    var now = new Date();
    var day = now.getDay();
    var hour = now.getHours();
  
    var otime = 10;
    var ctime = 24;
    var msg = "we open at "+otime+"am";
    var until = "midnight";
  
    if (day >= 1 && day <= 4) ctime = 22, until = "10pm";
    if (hour >= otime && hour <= ctime) msg = "we are open until " + until;
  
    document.getElementById('areWeOpen').textContent = msg;
})();

<div id="areWeOpen"></div>

Answer 2

这应该可以解决您的问题。你的代码中有很多错误-

function checkIfOpen()
    {
        var now = new Date();
        var day = now.getDay();
        var time = now.getHours();
        var open, weekday; //declaring variables here so that there are accessible outside the two 'if's

        if (time >= 10) {
            open = true;
        } else {
            open = false;
        } //no semi-colon required here

        if (day >= 1 && day <= 4) {
            weekday = true;
        } else {
            weekday = false;
        } //no semi-colon required here

        if (open === true && weekday === true) //using === for comparision instead of ==
        {
            alert("we are open till 10pm");
        }
        else if (open === true && weekday === false) //using 'else if' instead of `if else`
        {
            alert("we are open till midnight"); //semi-colon required here
        }
        else
        {
            alert("we open at 10am");
        }
    }

JS Bin- http://jsbin.com/fujazovobo/edit?html,js,output

Answer 3

您错误地设置了innerHTML。

而且这个更干

const checkIfOpen = () => {
  let now = new Date();
  let day = now.getDay();
  let hour = now.getHours();
  let closedMessage = "We will open at 10 AM";
  let openWeekdayMessage = "We are open till 10 PM";
  let openWeekendMessage = "We are open till midnight";
  const messageContainer = document.getElementById('areWeOpen');
  // Determine if today is a weekday
  let isWeekday = day > 0 && day < 6; // Sun is 0, Sat is 6
  // Determine if the place is open
  let isOpen = hour >= 10 && hour < isWeekday ? 24 : 22;
  if (!isOpen) messageContainer.textContent = closedMessage;
  else messageContainer.textContent = (isWeekday) ?  openWeekdayMessage : openWeekendMessage;
};
window.addEventListener('DOMContentLoaded',checkIfOpen); // when the elements are available

<span id="areWeOpen"></span>

Answer 4

看起来您已经很好地回答了自己的问题。对于时间争论，您应该考虑momentjs，因为它可以让您更轻松地处理时间。对于写入 DOM，jQuery 始终是一个选项。如果您不想使用库，请尝试：

<div>Your message is <span id="message"></span></div>
<script>
  var textNode = document.createTextNode('text')
  document.getElementById('message').appendNode(textNode)
</script>

但是，如果可能的话，尽量不要在客户端 JavaScript 中执行此操作。如果您在服务器上呈现此信息，屏幕阅读器和搜索引擎将更容易访问这些信息。如果您正在编写静态 HTML 文件，那么上面的建议应该可以满足您的需求。