#javascript #html #css #time #show-hide
Вопрос:
Как отображать/скрывать элементы в зависимости от текущего часа?
- показать 1-й ПРОЛЕТ с 12:00 до 14:00 (Скрыть другие пролеты)
- показать 2-й ПРОЛЕТ с 17:00 до 03:00 (Скрыть другие пролеты)
- показать 3-й ПРОЛЕТ с 07:00 до 10:00 (Скрыть другие пролеты)
Попытка
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)) amp;amp; 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) amp;amp; 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)) amp;amp; 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> Комментарии:
1. Может быть, использовать setTimeout
Ответ №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 amp;amp; h<10){
malam.style.display = 'none';
pagi.style.display = 'none';
siang.style.display = 'block';
}
else if(h>= 12 amp;amp; 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}; Вы можете прочитать больше здесь
Комментарии:
1. @fauzanrozaq не забудьте проверить ответ 😉
2. (Оффтопик) @Gass Интересно, как респонденты часто напоминают авторам вопросов, чтобы они «отмечали» свой ответ, но почему-то одни и те же вопросы не отвечают на хорошие вопросы, которые показывают исследования, усилия и минимальный код для воспроизведения проблемы.
3. Учитывая, что вы еще не объяснили свой код для того, чтобы научить ОП ничего о том, почему , или как это может работать у вас также введены кнопку, которая находится не в исходном коде, который требует взаимодействия (без объяснения, почему оно там, и почему это необходимо), и вы использовали встроенные обработки событий, которая сама плохая практика. Это, конечно, чисто мое мнение, и вы можете обновлять/объяснять — или нет — по своему усмотрению, но я не уверен, почему вы считаете, что этот ответ — как написано — заслуживает того, чтобы его приняли как лучшее решение.
Ответ №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 amp;amp; h < 10 ? 0 :
h >= 12 amp;amp; h < 14 ? 1 :
h >= 17 amp;amp; 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> Комментарии:
1. Мне действительно нравится ответ, за исключением ужасной вложенной тройки; независимо от этого, однако, имейте голос!
2. @дэвид, спасибо тебе! PS: просто чтобы встать на защиту 😀 условного (троичного) оператора , я бы (субъективно говоря) не назвал его таким ужасным 🙂 Я думаю, что на самом деле это, возможно , довольно прилично. По крайней мере, по сравнению с: jsfiddle.net/xravtc6k и данные троичные операторы являются базовыми CS101.
Ответ №3:
вы используете одно и то же время для паги, сианга и малама. Таким образом, вы можете сделать это с одним доступным способом следующим образом.
$(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";
}
});
Ответ №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> Комментарии:
1. я имею в виду не это , когда время … -показывать только 12.00 -14.00 идентификатор «малам» показать, другой идентификатор скрыть. -показывать только 17.00 — 03.00 идентификатор «pagi» показать, другой идентификатор скрыть. -показать 07.00 — 10.00 показ «сианг», другие идентификаторы скрыть.
2. Вы можете поиграться с текущим временем, а затем посмотреть, когда наступит тайм-аут для нас, например, сейчас 9, а установленный тайм-аут может быть через 2 часа