合体１６　フェードのリアル時計+カウントダウン

●2016/02/04：即時関数で囲んで、グローバル変数を消しました。
ブログパーツでよく見る時計のようなものを、自分のお気に入りの画像を使用して作成した JavaScript、第３弾です。
フェードイン・アウトで切り替わるスライドショーに、リアル時計とクリスマス用のカウントダウンメッセージが表示されます。
第１弾は■合体１１■Sl+Ot■フェードのリアル時計■から。
第２弾は■合体１５■Sl+Ot■フェードの装飾付きリアル時計■から。

今回の最大の違いは「クリスマス用カウントダウンメッセージ」が入っていること。
そして背景にツリー画像をいれることで、第２弾の「装飾付き」のような派手さを出していることです。
それでもHTMLの記述は、第１弾と同じ１行です。とても簡単です。

今回使用したツリーの背景画像は、壁紙用の背景素材です。
本来はページの上端横一列に並べて使用する壁紙を利用して、背景色を白色指定にして大きさをだし、プレートのように使用しました。
クリスマス用のフリー素材はたくさんの種類があるので、いろいろ工夫できるところが楽しいです。
カウントダウンの仕組みについては、■基本の背景８背景画像変化とカウントダウン■の説明をどうぞ。

■合体元JavaScriptはこちら→　フェード８■フェードでサイズ違い実寸表示＋その他１４■面白■リアル時計３種＋基本の背景８背景画像変化とカウントダウン

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>合体１６　フェードのリアル時計+カウントダウン</title>

<!--★ここからコピー-->
<style>
body{ background:#ade; }/*★背景色　水色*/

/*★必須。装飾付き時計の位置指定と、枠(paddingやborder)などの装飾。位置指定は必ずposition:●●(何でも使いやすい指定で);が必要*/
#baseF{
position:relative;/*★必須。基準位置の指定*/
margin:100px auto;/*★水平中央位置指定(上下、左右)*/
background:url(toy1.gif) repeat-x #fff;/*★ツリーの背景画像指定。横繰り返し。背景色の白。ツリー背景の実寸は横262px縦154px*/
width:450px;/*★横幅はお好みで*/
height:200px;/*★縦幅はお好みで。今回は背景色を白にすることで、ツリー背景画像実寸より大きくしています。*/
border:solid 5px #d34;/*★枠線指定。赤色★*/
box-shadow:5px 5px 10px #888;/*★影指定*/
border-radius:25px;/*★角丸指定*/
}

/*★必須。フェードスライド用の指定*/
#Ga1,#Ga2{
position:absolute;/*★#baseFを位置の基準にするためと画像２枚を同位置にするため*/
top:0;bottom:0;left:0;right:0;margin:auto;/*★#baseF内での画像の上下左右の中央位置指定。お好みで変更可*/
transition:2s ease-in-out;/*★フェード変化時間。1sは１秒*/
}

/*★必須。時計の文字指定*/
#timeF{
position:absolute;/*★#baseFを位置の基準にするため*/
bottom:10px;
left:10px;
color: #090;/*★文字色　緑色*/
font: bold 30px Arial,sans-serif;/*★太字、サイズ、フォント書体を一括指定*/
text-shadow:2px 2px 0 #f00;/*★時計の文字の影指定　赤色*/
}

/*★必須。クリスマス用カウントダウンメッセージの指定*/
#mesF{
position:absolute;/*★#baseFを位置の基準にするため*/
bottom:10px;
right:10px;
font: bold 18px Arial,sans-serif;/*★太字、サイズ、フォント書体を一括指定*/
color:#090;/*★文字色　緑色*/
}
</style>
<!--★ここまでコピー。bodyの中にもコピーがあります-->

</head>
<body>

<!--★ここからコピー。下の１行が時計の位置指定-->
<div id="baseF"></div>

<script type="text/javascript"><!--
/*==================================================================================================
★フェードでサイズ違い画像スライドショーと時計とカウントダウンメッセージ(後何日)を合体　　　2016/02/04
フェードのスライド　By　http://www.red.oit-net.jp/tatsuya/java/sshow2.htm (イヌでもわかるJavaScript講座)
リアル時計  By  http://makemobile.6.tool.ms/121/
カウントダウンメッセージ（後何日）By　http://makemobile.6.tool.ms/110/
===================================================================================================*/
(function (){  //即時関数で囲んでグローバル変数を消すため、この行はこのままで

//★スライド画像指定。増減可能。画像を順番に"●",と区切って、いくつでも並べる。最後の]の前には,(カンマ)無し
var ga=["toy2.gif","toy3.gif","toy4.gif","toy5.gif"];   
var myurl="";        //★スライド用画像パス。文書とは別のフォルダーなどに入っている時は指定。スライド全画像共通部分
var spdS=5000;　     //★スライド画像切替時間 1000=1秒 スライド速度。CSS指定のフェード変化時間より長くする

function Xs(){       /*←この行はそのまま触らない。カウントダウンメッセージ「後何日」部分の開始*/
var set_y=2022;      //★指定日設定。上から年、月、日。アイドルの誕生日でも受験の日でもオリンピックの期日でもよい
var set_m=12;
var set_d=25;
var b="クリスマス";  //★指定日の内容。メッセージ文字として必ず表示。長い時は改行も可能。見本→var b="●●君の<br>誕生日";

//指定項目終了。ここからカウントダウンメッセージ「後何日」部分の続き。日数の数字のみ赤色指定---------------------------------------
var now  = new Date();
var spday= new Date(set_y,set_m-1,set_d);
var a = (spday.getTime() - now.getTime())/(24*60*60*1000);
a= Math.ceil(a);
if(a <0){ mesF.innerHTML=b+"から<br> <span style='color:red;'>"+a*(-1)+"</span> 日すぎたよ"; }
else if(a==0){ mesF.innerHTML="今日は<br>"+b+"だよ！"; }
else if(a >0){ mesF.innerHTML=b+"まで、<br>あと <span style='color:red;'>"+a+"</span> 日"; }
}

//ここからフェードのスライドショー部分--------------------
var load=new Array();//画像先読み込み。切替をスムーズにする
for (var p=0;p<ga.length;p++){load[p]=new Image();load[p].src=myurl+ga[p];}
var i=-1;		          //現在表示している配列番号
var myflg=0;		          //どっちを表示して、どっちを消すかのフラグ
function myChange(){              /*スライドショーメイン関数*/
/*★配列番号は画像順番通り表示。★↓下の１行を『 i=Math.floor(Math.random()*ga.length); 』と変更すると画像ランダム表示*/
i=(i<ga.length-1)?++i:0;
myflg=(myflg==0) ? 1 : 0;         //表示・非表示フラグ反転
if (myflg==0){ Ga1.src=myurl+ga[i]; Ga1.style.opacity=1; Ga2.style.opacity=0; } //次の画像をセットする。フェードイン。フェードアウト
else{ Ga2.src=myurl+ga[i]; Ga1.style.opacity=0; Ga2.style.opacity=1; } //次の画像をセットする。フェードアウト。フェードイン
setTimeout( myChange,spdS);    //指定速度周期に画像を更新する
}	

//ここから時計部分------------------------------------------------
function Clk(){
function f(n){return n<10?"0"+n:n;}
var t=new Date;
document.getElementById("timeF").innerHTML=f(t.getHours())+":"+f(t.getMinutes())+":"+f(t.getSeconds());
}
setInterval(Clk,1000);

//スライドショーと時計とカウントダウンメッセージ「後何日」のデータを#baseFにまとめる-----------------
var sss='<img src="" id="Ga1"><img src="" id="Ga2"><div id="timeF"></div><div id="mesF"></div>';
document.getElementById("baseF").innerHTML=sss;
myChange(); Xs();
}());//即時関数終了
// --></script>
<!--★ここまでコピー-->

</body>
</html>

合体１６■Sl+Ot+Mv■ フェードのリアル時計+カウントダウン 最終修正日 : 2016/02/04

　合体１６■Sl+Ot+Mv■　フェードのリアル時計+カウントダウン　　　　　最終修正日 : 2016/02/04