Как скрыть / отобразить слайдер революции в соответствии со стандартным временем 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>

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>