根據一天中的小時顯示元素

Question

如何根據當前小時顯示/隱藏元素？

• 從 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

您可以使用getHours()來獲取本地時間。

 let malam = document.getElementById("malam"); let pagi = document.getElementById("pagi"); let siang = document.getElementById("siang"); function show(){ var today = new Date(); var 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>

注意：使用內聯事件處理不是最佳實踐，如果您想改進此代碼，請使用addEventListener()方法。 你可以在這里閱讀更多

Answer 2

您可以使用一組對象並根據一天中的當前小時提取與數組索引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>

Answer 3

你在 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 4

一個帶有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>