如何根据标准时间 Javascript 隐藏/显示旋转滑块答案

【问题标题】：How to hide/display revolution slider according to standard time Javascript如何根据标准时间 Javascript 隐藏/显示旋转滑块
【发布时间】：2017-05-11 23:49:53
【问题描述】：

我在我的一个 WordPress 网站上使用了旋转滑块。我打算根据标准时间来改变滑块。示例我有滑块 1（早上）、滑块 2（中午）、滑块 3（晚上）和滑块 4 （午夜）。

我希望旋转滑块读取标准时间并相应地更改滑块。

我尝试使用 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>

【问题讨论】：

标签： javascript css wordpress slider

【解决方案1】：

document.getElementsByClassName() 返回一个集合。您正在设置它们的集合样式，而不是元素本身。如果它们不是唯一的，您将必须遍历集合并单独设置每个元素的样式，或者如果它们是唯一的，您可以简单地使用 [0] 从集合中选择第一个元素。我的建议是给每个元素一个唯一的 ID 并使用 document.getElementById() 这将返回你想要的元素。

【讨论】：

【解决方案2】：

我已经在一个示例 html 页面中尝试了您的代码，它可以工作。我所做的唯一修改是使用 ID 而不是类，并使用“显示”而不是“可见性”。但是，这两个属性都可以正常工作。我假设您将其放置在页面的页脚中。试试这个代码。

<!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>

【讨论】：

它在 html 页面上工作。但是当我在我的革命滑块自定义 JavaScript 代码块上使用它时。它不工作。