表示DIV

Question

こんにちはSO-コミュニティ、

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であり、他のさまざまな脅威から学ぶことを試みたので、慈悲を示してください。 フィードバックに感謝します。 :)

よろしく

ジョナス

Answer 1

何を持っていることは動作するはずですが、私は少しそれをクリーンアップしました。私はあなたの評価がどのように働いているかを表示するためにコンソールログを使用しました。必要に応じて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/

Answer 2

あなたのロジックは、実装がが少しオフになって、結構です。 ;-)

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