javascript - 根据一天中的小时数显示元素

Question

如何根据当前时间显示/隐藏元素？

• 显示从 12:00 到 14:00 的第一个 SPAN(隐藏其他跨度)
• 从 17:00 到 03:00 显示第二个 SPAN(隐藏其他跨度)
• 显示从 07:00 到 10:00 的第 3 个 SPAN(隐藏其他跨度)

尝试

var pagi = new Date();   // morning
var siang = new Date();  // day
var malam = new Date();  // night
var time = new Date().getTime();

if (time > pagi.setHours(12, 00)) && time < end.setHours(14, 00)) {
  document.getElementById("malam").style.display = "block";
  document.getElementById("pagi").style.display = "none";
  document.getElementById("siang").style.display = "none";
} else if (time > siang.setHours(17, 00) && time < end.setHours(03, 00))) {
  document.getElementById("malam").style.display = "none";
  document.getElementById("pagi").style.display = "block";
  document.getElementById("siang").style.display = "none";
} else if (time > malam.setHours(07, 00)) && time < end.setHours(10, 00)) {
  document.getElementById("malam").style.display = "none";
  document.getElementById("pagi").style.display = "none";
  document.getElementById("siang").style.display = "block";
}

<span id="malam" style="background-color:magenta;"> malam </span>
<br/>
<span id="pagi" style="background-color:cyan;"> pagi </span>
<br/>
<span id="siang" style="background-color:orange;"> siang </span>

Answer 1

您可以使用 getHours() 获取本地时间，然后使用条件语句相应地显示元素。

let malam = document.getElementById("malam"), 
    pagi = document.getElementById("pagi"),
    siang = document.getElementById("siang"), 
    today, h;

function show(){

  today = new Date(),h = today.getHours();
  
  if(h >= 3){
      if(h>=7 && h<10){
        malam.style.display = 'none';
        pagi.style.display = 'none';
        siang.style.display = 'block';
      }
      else if(h>= 12 && h<14){
        malam.style.display = 'block';
        pagi.style.display = 'none';
        siang.style.display = 'none';
      }
      else if(h>=17){
        malam.style.display = 'none';
        pagi.style.display = 'block';
        siang.style.display = 'none';
      }    
  }else{
      malam.style.display = 'none';
      pagi.style.display = 'block';
      siang.style.display = 'none';
  }
}

<p id="malam" style="background-color:magenta; display:none"> malam </p>
<p id="pagi" style="background-color:cyan; display:none"> pagi </p>
<p id="siang" style="background-color:orange; display:none"> siang </p>

<button onclick='show()'>test</button>

注意:使用内联事件处理不是最佳实践，如果您想改进此代码，请使用object.onclick = function() {myScript}; 你可以阅读更多 here