如何根据当前时间显示不同的文本

html5 • • 问答

所以首先做一点背景知识，我正在免费在线课程中学习 javascript，因为我认为知道如何编码会很糟糕很酷，将来有用。目前完成了 55% 的课程，并考虑应用我迄今为止学到的知识来创建一个新的标签扩展。我的想法是让文本随着时间而变化，经过研究我了解了日期对象，然后一个小时后，代码片段中的代码是最终结果..后来我才发现'好Morning' 在时钟到达 12 点后没有改变，尝试使用不同的运算符和循环，但结果要么相同，要么出错。对不起，如果这是一个愚蠢的问题，但我如何才能使文本在 12 点时从“早安”变为“下午好”，在 7:00/19 时变为“晚安”？

function getDateTime() { 
    let date = new Date(); 
    let hour = date.getHours(); 
   if (hour >= 6) {
    document.getElementById('d').innerHTML = "Good Morning";
  } else if (hour >= 12) {
    document.getElementById('d').innerHTML = "Good Afternoon";
  } else if (hour >= 19) {
    document.getElementById('d').innerHTML = "Good Evening";
  } else if (hour >= 0) {
    document.getElementById('d').innerHTML = "Go to sleep soon";
  } else if (hour >= 2) {
    document.getElementById('d').innerHTML = "You should consider going to sleep";
  } else if (hour >= 3) {
     document.getElementById('d').innerHTML = "GO. TO. SLEEP.";
  } else {
     document.getElementById('d').innerHTML = "If you see this, something is wrong with the code";
  }
}
getDateTime()
h1 {
  text-align: center;
  position: relative;
  font-size: 50px;
}
<h1>

</h1>
<h1>

</h1>

回答

当您有一系列if/else if条件时，将使用满足的第一个条件。

当它在 12 之后，它也在 6 之后，所以条件hour >= 6为真，这就是你将得到的输出。它永远不会检查，hour >= 12因为条件已经满足。

所以你应该按照特殊性的顺序排列你的条件。在这种情况下，这意味着按小时数递减。

function getDateTime() {
  let date = new Date();
  let hour = date.getHours();
  if (hour >= 19) {
    document.getElementById('d').innerHTML = "Good Evening";
  } else if (hour >= 12) {
    document.getElementById('d').innerHTML = "Good Afternoon";
  } else if (hour >= 6) {
    document.getElementById('d').innerHTML = "Good Morning";
  } else if (hour >= 3) {
    document.getElementById('d').innerHTML = "GO. TO. SLEEP.";
  } else if (hour >= 2) {
    document.getElementById('d').innerHTML = "You should consider going to sleep";
  } else if (hour >= 0) {
    document.getElementById('d').innerHTML = "Go to sleep soon";
  } else {
    document.getElementById('d').innerHTML = "If you see this, something is wrong with the code";
  }
}
getDateTime()
以上是如何根据当前时间显示不同的文本的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>
相关内容