2016-07-07 19 views
1

get user timeでCSSを変更したい。時間が今06:00〜12:00の場合、モーニングスタイルを取得します。時間12:00〜18:00午後のスタイルを取得します。時間18:00〜06:00夜のスタイルを取得します。そうでない場合は、通常のスタイルを取得します。Get Time Javascriptを使用してスタイルを変更するCSS

function morning() { 
    document.getElementsByTagName('BODY')[0].style.backgroundColor = "#fcfcfc"; 
    document.getElementsByTagName('BODY')[0].style.color = "#505050"; 
} 

function afternoon() { 
    document.getElementsByTagName('BODY')[0].style.backgroundColor = "gainsboro"; 
    document.getElementsByTagName('BODY')[0].style.color = "black"; 
} 

function night() { 
    document.getElementsByTagName('BODY')[0].style.backgroundColor = "#1b1b1b"; 
    document.getElementsByTagName('BODY')[0].style.color = "#fff"; 
} 

function normal() { 
    document.getElementsByTagName('BODY')[0].style.backgroundColor = "#fff"; 
    document.getElementsByTagName('BODY')[0].style.color = "#1b1b1b"; 
} 
+0

[JavaScriptで現在の日付と時刻を取得する]の可能な複製(http://stackoverflow.com/questions/10211145/getting-current-date-and-time-in-javascript) –

答えて

1

一度に(チェック以下の例毎秒)すべてのX秒チェックするsetInterval()を使用することができます。

function changeStyle() { 
    var date = new Date(); 
    var current_time = d.getHours(); //Get Hour between 0 and 23 

    if(current_time >= 6 && current_time <= 12) 
     morning(); 
    else if(current_time >= 12 && current_time <= 18) 
     afternoon(); 
    else if(current_time >= 12 && current_time <= 18) 
     night(); 
    else 
     normal(); 
} 

:その後、時間をチェックしますchangeStyle()関数を作成

setInterval(changeStyle, 1000); //1000 ms = 1 second 

をまたは使用するswitch()ステートメント:

switch(true) { 
    case (current_time >= 6 && current_time <= 12): 
     morning(); 
    break; 
    case (current_time >= 12 && current_time <= 18): 
     afternoon(); 
    break; 
    case if(current_time >= 12 && current_time <= 18): 
     night(); 
    break; 
    default: 
     normal(); 
} 

これが役立ちます。