如何根据当前时间显示/隐藏元素?
- 显示从 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>
最佳答案
您可以使用 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
关于javascript - 根据一天中的小时数显示元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68556309/