Как скрыть / отобразить слайдер революции в соответствии со стандартным временем Javascript

Я использую revolution slider на одном из моих WordPress сайтов. Я планирую изменить слайдер в соответствии со стандартным временем.
Пример у меня есть slider1 (утро), slider2 (полдень), slider3 (вечер) и slider4
(Полночь.)

Я хочу, чтобы слайдер revolution прочитал стандартное время и соответственно изменил слайд.

Я попробовал это с помощью JavaScript, давая уникальные имена классов для каждого слайдера.
Вот код:

<script>
var time = new Date().getHours(); 
if (time >= 8) {
document.getElementsByClassName('morningslide').style.visibility='visible';
document.getElementsByClassName('noonslide').style.visibility='hidden';
document.getElementsByClassName('eveningslide').style.visibility='hidden';
document.getElementsByClassName('midnightslide').style.visibility='hidden';
}


if (time >= 12) {
document.getElementsByClassName('appBanner').style.visibility = 'hidden';
document.getElementsByClassName('noonslide').style.visibility='visible';
document.getElementsByClassName('eveningslide').style.visibility='hidden';
document.getElementsByClassName('midnightslide').style.visibility='hidden';
}


if (time >= 18) {
document.getElementsByClassName('morningslide').style.visibility='hidden';
document.getElementsByClassName('noonslide').style.visibility='hidden';
document.getElementsByClassName('eveningslide').style.visibility='visible';
document.getElementsByClassName('midnightslide').style.visibility='hidden';
}


if (time >= 22) {
document.getElementsByClassName('morningslide').style.visibility='hidden';
document.getElementsByClassName('noonslide').style.visibility='hidden';
document.getElementsByClassName('eveningslide').style.visibility='hidden';
document.getElementsByClassName('midnightslide').style.visibility='visible';
}
</script>
Seetharam, в 17:23 (источник)

2 ответа

  1. document.getElementsByClassName() возвращает коллекцию. Вы устанавливаете их стиль коллекции, а не самих элементов. Если они не уникальны, или если они уникальны, вы можете просто выбрать первый элемент из коллекции, используя [0]его . Моя рекомендация, хотя было бы дать каждому элементу уникальный идентификатор и использоватьdocument.getElementById(), который будет возвращать элемент, который вы хотите.

  2. Я пробовал ваш код в Примере html-страницы, и он работает. Единственной модификацией, которую я сделал, было использование ID вместо классов и использование ‘display’ вместо ‘visibility’.Однако оба атрибута будут работать нормально. Я предполагаю, что вы размещаете это в нижнем колонтитуле страницы. Попробуйте этот код.

    <!doctype html>
<html>
<head>
   
</head>

<body>

<div>
    <div id="morningslide">Hello this is Morning</div>
    <div id="noonslide">Hello this is Noon</div>
    <div id="eveningslide">Hello this is Evening</div>
    <div id="midnightslide">Hello this is Midnight</div>
</div>
</body>

<script>
    var time = new Date().getHours();
    document.getElementById('morningslide').style.display='none';
    document.getElementById('noonslide').style.display='none';
    document.getElementById('eveningslide').style.display='none';
    document.getElementById('midnightslide').style.display='none';

    if (time > 8 && time < 11) {
        document.getElementById('morningslide').style.display='block';
    }
    else if (time >= 12 && time <= 18) {
        document.getElementById('noonslide').style.display='block';
    }
    else if (time > 18 && time <= 22) {
        document.getElementById('eveningslide').style.display='block';
    }
    else if (time > 22) {
        document.getElementById('midnightslide').style.display='block';
    }

</script>
</html>