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

Question

如何根据当前小时 show/hide 元素？

显示从 12:00 到 14:00 的第一个 SPAN（隐藏其他跨度）
显示从 17:00 到 03:00 的第二个 SPAN（隐藏其他跨度）
显示从 07:00 到 10:00 的第三个 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

你在同一时间使用 pagi、siang 和 malam。所以你可以通过以下方式使用单个变量来做到这一点。

 $(document).ready(function () {
            var pagiT = new Date();
            var time = new Date().getTime();

            if (time > pagiT.setHours(14, 00)) {
                document.getElementById("malam").style.display = "none";
                document.getElementById("pagi").style.display = "block";
                document.getElementById("siang").style.display = "none";
            }
            else if (time < pagiT.setHours(03, 00)) {
                document.getElementById("malam").style.display = "none";
                document.getElementById("pagi").style.display = "block";
                document.getElementById("siang").style.display = "none";
            }
            else  {
                document.getElementById("malam").style.display = "none";
                document.getElementById("pagi").style.display = "none";
                document.getElementById("siang").style.display = "block";
            }


        });

Answer 2

带有 setTimeout()

的简单示例

var malam = document.getElementById("malam")
  var pagi = document.getElementById("pagi")
  var siang = document.getElementById("siang")
  
 setTimeout(showMalam, 3000);

  function showMalam(){
    console.log("showMalam caled at: " +  (new Date()));
    malam.style.display = "block";
    pagi.style.display = "none";
    siang.style.display = "none";
    setTimeout(showPagi, 3000);
  }
  function showPagi(){
    console.log("showPagi caled at: " +  (new Date()));
    malam.style.display = "none";
    pagi.style.display = "block";
    siang.style.display = "none";
    setTimeout(showSiang, 3000);
  }
  function showSiang(){
    console.log("showSiang caled at: " +  (new Date()));
    malam.style.display = "none";
    pagi.style.display = "none";
    siang.style.display = "block";
   }

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

Answer 3

您可以使用 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

Answer 4

您可以使用一个对象数组，并提取与数组索引 0, 1, 2, 3 给定的当前小时相匹配的对象。并大大简化您的 HTML：

const h = new Date().getHours();
const dp = [
  {text: "morning", bg: "cyan"},      // From 07 to 10
  {text: "day",     bg: "orange"},    // From 12 to 14
  {text: "night",   bg: "magenta"},   // From 17 to 03
  {text: "",        bg: "none"},      // All other hours
][
  h >=  7 && h < 10 ? 0 :
  h >= 12 && h < 14 ? 1 :
  h >= 17 && h <  3 ? 2 :
                      3
];

const EL_dayPeriod = document.querySelector("#dayPeriod");
EL_dayPeriod.textContent      = dp.text; 
EL_dayPeriod.style.background = dp.bg;

<span id="dayPeriod"></span>

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

Show Element depending on Hour of a day

html

javascript

css

time

show-hide