【簡単コピペ】現在の時間でcssが変化するjavascript
スポンサードリンク
あーーー・・・時間に合わせて色合い変えたいわー。
夜なら暗めに、昼なら明るい感じに色合い変えたいわー。もっと加えるなら夜なら「お月さま」、お昼なら「太陽」を出しておくってのもありだよねー。
そんな声に合わせて、現在時刻に合わせてcssが変化する手抜きjavascript用意しました！
目次
時間でcssが切り替わるDEMO
DEMO
DEMOを出す前から分かってました。時間が経たないと確認ができないことをｗ
ってことで、もし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が切り替わるソースコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<!-- jQuery --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <!-- html --> <div> <p class="timechange-sample">DEMO</p> </div> <!-- css --> <style> .timechange-sample{ width: 200px; text-align: center; padding: 20px 5px; background-color: #333; color: #FFF; } </style> <!-- script --> <script type="text/javascript"> $(document).ready(function(){ var day = new Date(); var hour = day.getHours(); if( hour <= 1 ) { $('.timechange-sample').css('background-color','#212F9A'); } else if( hour <= 7 ) { $('.timechange-sample').css('background-color','#F3C336'); } else if( hour <= 11 ) { $('.timechange-sample').css('background-color','#DA1414'); } else if( hour <= 16 ) { $('.timechange-sample').css('background-color','#BD5001'); } else if( hour <= 20 ) { $('.timechange-sample').css('background-color','#573AEC'); } }); </script> |
ざっくり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 でした！
公開日：
最終更新日：2018/04/05