Show Element depending on Hour of a day

Question

How to show/hide elements depending on the current Hour?

• show 1st SPAN from 12:00 to 14:00 (Hide other spans)
• show 2nd SPAN from 17:00 to 03:00 (Hide other spans)
• show 3rd SPAN from 07:00 to 10:00 (Hide other spans)

Attempt

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

You can use getHours() to the get the local hour and then use conditional statements to display elements accordingly.

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>

Note: to use inline event-handling is not the best practice, if you would like to improve this code use object.onclick = function(){myScript}; You can read more here

Answer 2

A simple sample with 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

You could use an array of objects and extract the one that matches the array index 0, 1, 2, 3 given the current hour of a day. And drastically simplify your HTML as well:

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>

Answer 4

you are using same time for pagi, siang and malam. So you can do it with single vairable in following way.

 $(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";
            }


        });