時間帯でテキストや画像・埋め込み動画…など…HTML要素を変化させるJavaScript

当サイトのヘッダーで使用しています…

実装に関しては過去記事も合わせてお読み下さいな…

 Bloggerで時間帯別に画像やテキストを自動で変化させる記述


「JavaScript」

<script type="text/javascript">
var msg1 = '00:00-03:59に表示させるテキスト又はHTML要素';
var msg2 = '04:00-08:59に表示させるテキスト又はHTML要素';
var msg3 = '09:00-16:59に表示させるテキスト又はHTML要素';
var msg4 = '17:00-18:59に表示させるテキスト又はHTML要素';
var msg5 = '19:00-23:59に表示させるテキスト又はHTML要素';

var now = new Date();
var hour = now.getHours();

if(hour >= 0 && hour <= 3){
document.write(msg1);
}
if(hour >= 4 && hour <= 8){
document.write(msg2);
}
if(hour >= 9 && hour <= 16){
document.write(msg3);
}
if(hour >= 17 && hour <= 18){
document.write(msg4);
}
if(hour >= 19 && hour <= 23){
document.write(msg5);
}
</script>

HTML要素を記述する場合の引用符は…

「”」ダブルクォーテーションを使って下さい…

ピンクの文字は任意の文字列で構いませんが…

表示メッセージと時間帯で同じ文字列を使用して…

尚且つ…固有の文字列である必要があります…

同じページ内に複数箇所スクリプトを記述する場合も…

全て固有の文字列にして下さい…

表示メッセージと時間帯は自由に増減・設定して下さい…

ヘッダーの「ぶた」画像と「パステル調の立体的斜め掛けリボン」が…

 CSSだけで作るパステル調の立体的リボン(CSS-3D-Ribbon)…斜め掛け編

時間帯で変化させる実装箇所です…

実装コードも参考程度に置いておきます…

ヘッダーの実装コード

<script type="text/javascript">
var msg1='<h4 class="ribbon06 degrees" style="font-weight:900;position:absolute;top:-1px;right:-44px;width:80px;text-align:center">Midnight<span class="degrees" style="width:0;height:0;line-height:0;border-left:10px solid transparent;border-bottom:10px solid #9595ea;bottom:-7px;left:1px;position:absolute"></span><span class="degrees" style="width:0;height:0;line-height:0;border-left:10px solid transparent;border-bottom:10px solid #9595ea;bottom:-7px;right:1px;position:absolute"></span></h4><img alt="sleep" width="64" height="64" style="position:absolute;top:13px;left:660px;" src="「pig sleep」画像の「base64」生データ" />';
var msg2='<h4 class="ribbon04 degrees" style="font-weight:900;position:absolute;top:-1px;right:-44px;width:80px;text-align:center">Morning<span class="degrees" style="width:0;height:0;line-height:0;border-left:10px solid transparent;border-bottom:10px solid #eaea95;bottom:-7px;left:1px;position:absolute"></span><span class="degrees" style="width:0;height:0;line-height:0;border-left:10px solid transparent;border-bottom:10px solid #eaea95;bottom:-7px;right:1px;position:absolute"></span></h4><img alt="wakeup" width="64" height="64" style="position:absolute;top:13px;left:660px;" src="「pig wakeup」画像の「base64」生データ" />';
var msg3='<h4 class="ribbon03 degrees" style="font-weight:900;position:absolute;top:-1px;right:-44px;width:80px;text-align:center">9-5 Working<span class="degrees" style="width:0;height:0;line-height:0;border-left:10px solid transparent;border-bottom:10px solid #ea9595;bottom:-7px;left:1px;position:absolute"></span><span class="degrees" style="width:0;height:0;line-height:0;border-left:10px solid transparent;border-bottom:10px solid #ea9595;bottom:-7px;right:1px;position:absolute"></span></h4><img alt="working" width="64" height="64" style="position:absolute;top:13px;left:660px;" src="「pig working」画像の「base64」生データ" />';
var msg4='<h4 class="ribbon05 degrees" style="font-weight:900;position:absolute;top:-1px;right:-44px;width:80px;text-align:center">Twilight<span class="degrees" style="width:0;height:0;line-height:0;border-left:10px solid transparent;border-bottom:10px solid #95ea95;bottom:-7px;left:1px;position:absolute"></span><span class="degrees" style="width:0;height:0;line-height:0;border-left:10px solid transparent;border-bottom:10px solid #95ea95;bottom:-7px;right:1px;position:absolute"></span></h4><img alt="twilight" width="64" height="64" style="position:absolute;top:13px;left:660px;" src="「pig twilight」画像の「base64」生データ" />';
var msg5='<h4 class="ribbon02 degrees" style="font-weight:900;position:absolute;top:-1px;right:-44px;width:80px;text-align:center">Prime Time<span class="degrees" style="width:0;height:0;line-height:0;border-left:10px solid transparent;border-bottom:10px solid #95bfea;bottom:-7px;left:1px;position:absolute"></span><span class="degrees" style="width:0;height:0;line-height:0;border-left:10px solid transparent;border-bottom:10px solid #95bfea;bottom:-7px;right:1px;position:absolute"></span></h4><img alt="primetime" width="64" height="64" style="position:absolute;top:13px;left:660px;" src="「pig primetime」画像の「base64」生データ" />';
var now=new Date();
var hour=now.getHours();
if(hour>=0&&hour<=3){document.write(msg1)}
if(hour>=4&&hour<=8){document.write(msg2)}
if(hour>=9&&hour<=16){document.write(msg3)}
if(hour>=17&&hour<=18){document.write(msg4)}
if(hour>=19&&hour<=23){document.write(msg5)};
</script>

Design jQuery jQuery / Extra Current-Label : JavaScript