顯示DIV只在特定日期範圍

-1

我想這可能是一個業餘類型的問題，但我不能在任何地方找到一個妥善的解決辦法：

我試圖僅通過JavaScript在聖誕節時間顯示特定的DIV。這裏去我的代碼到目前爲止：

function WinterTime() { 
var WinterStart = new Date(2017, 12, 21); 
var WinterEnd = new Date(2017, 12, 27); 
if 
(WinterStart <= CurrentDate && CurrentDate <= WinterEnd) { 
song2.style.display = "block"; 
} 
else { 
song2.style.display = "none"; 
} 
}

我定義了變量「song2」，以防萬一你想知道。

我想這可能是完整的垃圾代碼，但請顯示憐憫，因爲我是一個總noob，只是試圖從各種其他威脅學習。我很感謝您的反饋。 :)

問候

喬納斯

來源

2017-07-03 MichaelScott

的可能的複製[在聖誕節當天調用函數]（https://stackoverflow.com/questions/8631915/calling-a-function聖誕節當天） – GrumpyCrouton

你的問題到底是什麼？當你運行這段代碼時會發生什麼？歌曲2是否永遠不會出現？另請參閱：https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_style_display – deckeresq

我們是否應該假設CurrentDate已定義？ – Bryan

你有什麼應該工作，但我已經清理了一下。我使用控制檯日誌記錄來展示您的評估如何工作，您可以根據需要調整以使用HTML。

function winterTime(currentDate) { 
    var winterStart = new Date(2017, 12, 21); 
    var winterEnd = new Date(2017, 12, 27); 
    if(winterStart <= currentDate && currentDate <= winterEnd) { 
    // current date is within range 
    console.log('true') 
    } else { 
    // current date is out of range 
    console.log('false') 
    } 
} 

winterTime(new Date()); // now 
winterTime(new Date(2017, 12, 25)); // within range

https://jsfiddle.net/34dv5y9a/

來源

2017-07-03 20:17:24 Bryan

爲什麼在其他地方創建代碼時，您可以在這裏使用您的代碼創建一個不依賴外部資源的可運行代碼段？ – RobG

你的邏輯是好的，實現是有點過，但。 ;-)

// Function names starting with a capital letter are, 
 
// by convention, reserved for constructors. 
 
// The function should accept a date or default to the current date 
 
function winterTime(currentDate) { 
 
    currentDate = currentDate || new Date(); 
 
    // Months are zero indexed, so for 21 December: 
 
    var winterStart = new Date(2017, 11, 21); 
 
    var winterEnd = new Date(2017, 11, 27); 
 
    
 
    // Get a reference to the element 
 
    var song2 = document.getElementById('song2'); 
 
    
 
    if (winterStart <= currentDate && currentDate <= winterEnd) { 
 
    // Set display to '' (empty string) so the element adopts its default or inherited value 
 
    song2.style.display = ""; 
 
    console.log('Winter'); 
 
    
 
    } else { 
 
    song2.style.display = "none"; 
 
    console.log('Not winter'); 
 
    } 
 
} 
 

 
// Call function when page loaded 
 
window.onload = winterTime;

<div id="song1">Song 1</div> 
 
<div id="song2">Song 2</div>

如果你使用一些最近添加的功能，您可以使用CSS相當簡單應用的樣式：

function winterTime(currentDate = new Date()) { 
 
    var winterStart = new Date(2017, 11, 21); 
 
    var winterEnd = new Date(2017, 11, 27); 
 
    var isWinter = winterStart <= currentDate && currentDate <= winterEnd; 
 
    var song2 = document.getElementById('song2'); 
 
    song2.classList[isWinter? 'remove' : 'add']('hidden'); 
 

 
    // Just for testing 
 
    console.log(isWinter? 'Winter' : 'Not winter'); 
 
} 
 

 
// Call function when page loaded 
 
window.onload = function() { 
 
    winterTime(new Date(2017, 11, 25)); // Christmas day 
 
};

.hidden { 
 
    display: none; 
 
}

<div id="song1">Song 1</div> 
 
<div id="song2">Song 2</div>

來源

2017-07-04 02:42:39 RobG

顯示DIV只在特定日期範圍

回答

相關問題