如何根據標準時間隱藏/顯示旋轉滑塊Javascript

我在我的一個WordPress站點上使用革命滑塊。我打算根據標準時間更改滑塊。示例我有滑塊1（早上），滑塊2（中午），滑塊3（晚上）和滑塊4 （午夜）。如何根據標準時間隱藏/顯示旋轉滑塊Javascript

我想要革命滑塊讀取標準時間並相應地更改幻燈片。

我嘗試了這種使用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>

來源

2016-12-27 Seetharam

document.getElementsByClassName()返回一個集合。你正在設定他們的風格，而不是元素本身。如果不是唯一的，您將必須遍歷集合並單獨設置每個集合的樣式，或者如果它們是唯一的，則可以使用[0]僅從集合中選擇第一個元素。我的建議雖然會給每個元素一個唯一的ID和使用document.getElementById()這將返回你想要的元素。

來源

2016-12-27 17:43:33 wackozacko

我試過你的代碼在一個示例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>

來源

2016-12-27 18:17:18

其工作的HTML頁面。但是當我在革命滑塊上使用它自定義JavaScript代碼塊時。它不工作。 – Seetharam

如何根據標準時間隱藏/顯示旋轉滑塊Javascript

回答

相關問題