ホームページ制作 漫画で説明

効果が実感できる、ユーザーの記憶に残る制作なら「Memorynator」

0776-65-9795

営業時間 10:00~18:00

【簡単コピペ】現在の時間でcssが変化するjavascript

スポンサードリンク

あーーー・・・時間に合わせて色合い変えたいわー。
夜なら暗めに、昼なら明るい感じに色合い変えたいわー。もっと加えるなら夜なら「お月さま」、お昼なら「太陽」を出しておくってのもありだよねー。

そんな声に合わせて、現在時刻に合わせてcssが変化する手抜きjavascript用意しました!

時間でcssが切り替わるDEMO

DEMO


DEMOを出す前から分かってました。時間が経たないと確認ができないことをw
ってことで、もしDEMOを確認したいんだ!って人はパソコンの時間を一時的に変更するか、
~01:00 background-color:#212F9A
~07:00 background-color:#F3C336
~11:00 background-color:#DA1414
~16:00 background-color:#BD5001
~20:00 background-color:#573AEC
上の時間帯で確認してみてね(テキトウデスミマセン
(※もし色が変わらなった場合は、スーパーリロードしてみてください ⇒Chromeならshift+F5)

時間でcssが切り替わるソースコード

 

ざっくりscript解説

var day = new Date();

日付の取得です。

var hour = day.getHours();

時刻の取得です。

else if( hour <= 7 ) {
$('.timechange-sample').css('background-color','#F3C336'); }

条件分岐とcssの書き換えになります。$('.timechange-sample').css('background-color','#F3C336');の部分を変えることで、様々なことができますね!

 

まとめ

時間によって変化するLPや季節によって画像が違うサイトとか面白そうですよね!
Memorynatorのストーリーにも導入してみようかな・・・

以上、【簡単コピペ】現在の時間でcssが変化するjavascript でした!

 - ホームページ・ウェブサイト制作

この記事の執筆者:

-->