● 内容
① 自作でカウントダウンブログパーツをJavaScriptで作成する。
● 機能
① イベント日を指定可能（例 2014/08/28 08:36:00）
② イベント日到達までの画像、メッセージが指定可能。
③ イベント日到達後の画像、メッセージが指定可能。
④ イベント日の表示・非表示が可能。
⑤ イベントタイトルの指定が可能。
⑥ イベント到達後もカウントダウンが可能。（マイナス表示）
⑦ カウントダウンタイマーの指定が可能。
⑧ 日付表示形式の指定が可能。
● 設置例
● 設置方法
① 画像を用意する（到達前、到達後の画像は同じ画像でもＯＫ）
・ カウントダウン到達までの画像（例）
・ カウントダウン到達後の画像(例）
② 配置したい場所（フリースペース、メッセージボード、記事など）にＨＴＭＬモードで
下記を入れる。
<div class="count_down_set_area"></div>
③ フリープラグインへ下記を追加する。（例）
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>(function(j){j(function(){$=jQuery=j})})($)</script>
<script type="text/javascript" src="http://usrcss.ameblo.jp/skin/templates/6d/7d/10030757386.css"></script>
<script type="text/javascript">
// count_down_option この部分がパラメータ
var count_down_option=[{
Designated_date:"2014/02/14 00:00:00",
Designated_Mes:"まで",
Designated_disp:"0",
count_down_img:"http://stat.ameba.jp/user_images/20130829/05/new-blue-777/b8/a3/j/o0481032612665290170.jpg",
count_down_img_done:"http://stat.ameba.jp/user_images/20130829/05/new-blue-777/4c/bd/j/o0481031812665290147.jpg",
loops:"0",
Title:"誕生日",
Messages:"メッセージ",
Messages_done:"終了メッセージイベント",
Timer_mode:100,
week:"(日),(月),(火),(水),(木),(金),(土)",
Edit_Designated:"年,月,日",
Edit_Count_down:"日,時,分,秒,"
}];
$(document).ready(function() {
$(".count_down_set_area").Count_down_exec();
});
</script>
④ ＣＳＳで各場所を調整する。
/* ----------------------------------------------------------- */
/* カウントダウンのＣＳＳ */
/* ----------------------------------------------------------- */
.Count_down_area { /* カウントダウン全体 */
width:180px; /* 幅 */
height:120px; /* 高さ */
margin:0px; /* マージンなし */
overflow:hidden; /* オーバーフロー */
}
.Count_down_area img.count_down_img{ /* 画像 */
width:180px; /* 画像幅 */
height:auto; /* 高さ自動縮小 */
margin:0px; /* マージンなし */
}
.Count_down_area .Count_down_text{ /* テキスト全体 */
position:relative; /* 相対配置 */
top:-120px; /* 上からの位置 */
left:0px; /* 左からの位置 */
color:#ffffff; /* 文字の色 */
height:120px; /* 高さ */
margin-left:5px; /* 左余白 */
}
.Count_down_area .Count_down_text .Title{/* タイトル */
font-size:16px; /* 文字の大きさ */
color:#ff77ff; /* 文字の色 */
font-weight:bold; /* 文字の太さ */
}
.Count_down_area .Count_down_text
.Designated_date{ /* イベント指定日 */
font-size:14px; /* 文字の大きさ */
color:#ff0000; /* 文字の色 */
font-weight:bold; /* 文字の太さ */
}
.Count_down_area .Count_down_text
.Designated_Mes{ /* まで */
font-size:16px; /* 文字の大きさ */
color:#ff0000; /* 文字の色 */
font-weight:bold; /* 文字の太さ */
}
.Count_down_area .Count_down_text
.count_down{ /* カウントダウン時計 */
font-size:16px; /* 文字の大きさ */
color:#00ffff; /* 文字の色 */
font-weight:bold; /* 文字の太さ */
}
.Count_down_area .Count_down_text
.Messages{ /* メッセージ */
font-size:12px; /* 文字の大きさ */
color:#ffff00; /* 文字の色 */
font-weight:bold; /* 文字の太さ */
}
/* ----------------------------------------------------------- */
● JavaScript ソース内容
● code.google.com にも格納
http://code.google.com/p/newblue/source/browse/Count_down.css
http://code.google.com/p/newblue/source/browse/Count_down.js
https://newblue.googlecode.com/svn/Count_down.css
https://newblue.googlecode.com/svn/Count_down.js
// --------------------------------------------------------------------
// カウントダウン
// --------------------------------------------------------------------
$.fn.extend({
Count_down_exec:function(){
// ***************************
// パラメタ（オプション）設定
// ***************************
// 初期値の設定(Default)
var Designated_date = "2020/01/01/ 00:00:00"; // 指定日時(ex 2015/08/28 08:36:00)
var Designated_Mes = "まで"; // 指定日時あとのメッセージ(ex まで)
var Designated_disp = "0"; // 指定日時間を表示するか？(0→表示する)
var count_down_img = ""; // カウントダウン中の画像
var count_down_img_done = ""; // カウントダウン完了時の画像
var loops = "1"; // ループさせるか？(1→完了後は停止）
var Title = "タイトル"; // タイトル
var Messages = "メッセージ"; // カウントダウン中のメッセージ
var Messages_done = "完了メッセージ"; // カウントダウン完了時のメッセージ
var Timer_mode = 1000; // タイマー(1000は1秒)
var week = ",,,,,,"; // 曜日
var Edit_Designated = "/,/,"; // 指定日編集
var Edit_Count_down = " days"; // カウントダウン編集
// ***************************
// オプションの設定(option)
// ***************************
var count_down_para = count_down_option[0];
var ud="undefined";
if(typeof count_down_para.Designated_date!=ud) {Designated_date = count_down_para.Designated_date;}
if(typeof count_down_para.Designated_Mes!=ud) {Designated_Mes = count_down_para.Designated_Mes;}
if(typeof count_down_para.Designated_disp!=ud) {Designated_disp = count_down_para.Designated_disp;}
if(typeof count_down_para.count_down_img!=ud) {count_down_img = count_down_para.count_down_img;}
if(typeof count_down_para.count_down_img_done!=ud){count_down_img_done = count_down_para.count_down_img_done;}
if(typeof count_down_para.loops!=ud) {loops = count_down_para.loops;}
if(typeof count_down_para.Title!=ud) {Title = count_down_para.Title;}
if(typeof count_down_para.Messages!=ud) {Messages = count_down_para.Messages;}
if(typeof count_down_para.Messages_done!=ud) {Messages_done = count_down_para.Messages_done;}
if(typeof count_down_para.Timer_mode!=ud) {Timer_mode = count_down_para.Timer_mode;}
if(typeof count_down_para.week!=ud) {week = count_down_para.week;}
if(typeof count_down_para.Edit_Designated!=ud) {Edit_Designated = count_down_para.Edit_Designated;}
if(typeof count_down_para.Edit_Count_down!=ud) {Edit_Count_down = count_down_para.Edit_Count_down;}
// *******************
// カウントダウン計算
// *******************
var Count_down_result_obj= Designated_day_comp(Designated_date,Edit_Count_down);
var count_down_img_src,count_down_Messages;
// ***************************************************
// カウントダウンメッセージ・カウントダウン画像の決定
// ***************************************************
if(Count_down_result_obj.recDone!=-1){ // イベント日時到達済み
count_down_img_src = count_down_img_done;
count_down_Messages = Messages;
}else{ // イベント日時未到達
count_down_img_src = count_down_img;
count_down_Messages = Messages_done;
}
// **************************************************************************************
// イベント日時到達済みでループさせない場合は、日時到達までのカウントダウンは表示しない
// **************************************************************************************
if((loops!="1")&&(Count_down_result_obj.recDone==-1)){Count_down_result_obj.recValue="";}
// *************************
// イベント日の表示・非表示
// *************************
if(Designated_disp=="0"){
var edit_Designated_date=Date_Design(Designated_date,Edit_Designated,week);
}else{
var edit_Designated_date="";
Designated_Mes="";
}
// ************************
// ＨＴＭＬ作成と書き込み
// ************************
$(this).html('<div class="Count_down_area"><img src="'+count_down_img_src+'" class="count_down_img"><div class="Count_down_text"><div class="Title">'+Title+'</div><div class="Designated_date_wrap"><span class="Designated_date">'+edit_Designated_date+'</span><span class="Designated_Mes">'+Designated_Mes+'</span></div><div class="count_down">'+Count_down_result_obj.recValue+'</div><div class="Messages">'+count_down_Messages+'</div></div></div>');
// **************************************************************************************
// イベント日時到達済みでループさせない場合は、日時到達までのカウントダウンは実行しない
// **************************************************************************************
if((loops!="1")&&(Count_down_result_obj.recDone==-1)){return 0;}
// *********************************
// カウントダウン再実行(自分を実行)
// *********************************
var my_this=this;
setTimeout( function(){my_this.Count_down_exec();},Timer_mode );
}
});
// ----------------------------------------------------
// 現在日 - 指定日(あと何日？)
// ----------------------------------------------------
function Designated_day_comp(Designated_day,Edit_Count_downs){
var Designated_days = new Date(Designated_day);
var today = new Date();
var day = Math.floor(( Designated_days-today)/(24*60*60*1000));
var hour = Math.floor(((Designated_days-today)%(24*60*60*1000))/(60*60*1000));
var min = Math.floor(((Designated_days-today)%(24*60*60*1000))/(60*1000))%60;
var sec = Math.floor(((Designated_days-today)%(24*60*60*1000))/1000)%60%60;
var milli = Math.floor(((Designated_days-today)%(24*60*60*1000))/10)%100;
var return_cvdone=0;
if((day<0)||(hour<0)||(min<0)||(sec<0)||(milli<0)){return_cvdone=-1}
if(return_cvdone!=-1){
if(day<10) {day ="0"+day }
if(hour<10) {hour ="0"+hour }
if(min<10) {min ="0"+min }
if(sec<10) {sec ="0"+sec }
if(milli<10){milli="0"+milli}
}
// Array Set
var Edit_Count_down_Array= Edit_Count_downs.split(",");
return_cvalue="";
for(i=0; i<Edit_Count_down_Array.length; i++){
if(i==0){return_cvalue+='<span class="day">'+day+'</span>' +Edit_Count_down_Array[i];}
if(i==1){return_cvalue+='<span class="hour">'+hour+'</span>' +Edit_Count_down_Array[i];}
if(i==2){return_cvalue+='<span class="min">'+min+'</span>' +Edit_Count_down_Array[i];}
if(i==3){return_cvalue+='<span class="sec">'+sec+'</span>' +Edit_Count_down_Array[i];}
if(i==4){return_cvalue+='<span class="milli">'+milli+'</span>'+Edit_Count_down_Array[i];}
}
return {recValue:return_cvalue,recDone:return_cvdone};
}
// ----------------------------------------------------
// 指定日の編集
// ----------------------------------------------------
function Date_Design(day_value,Edit_Designateds,weeks){
// Array Set
var week_Array= weeks.split(",");
var dayw = new Date(day_value);
var year = dayw.getYear(); // 年
var month = dayw.getMonth() + 1; // 月
var day = dayw.getDate(); // 日
var week = week_Array[ dayw.getDay() ]; // 曜日
var hour = dayw.getHours(); // 時
var min = dayw.getMinutes(); // 分
var sec = dayw.getSeconds(); // 秒
var milli = dayw.getMilliseconds(); // ミリ秒
if(year < 2000) { year += 1900; }
if(month < 10) { month = "0" + month; }
if(day < 10) { day = "0" + day; }
if(hour < 10) { hour = "0" + hour; }
if(min < 10) { min = "0" + min; }
if(sec < 10) { sec = "0" + sec; }
if(milli < 10) { milli = "0" + milli; }
// Array Set
var Edit_Designated_Array = Edit_Designateds.split(",");
return_value="";
for(i=0; i<Edit_Designated_Array.length; i++){
if(i==0){return_value+='<span class="year">'+year+'</span>' +Edit_Designated_Array[i];}
if(i==1){return_value+='<span class="month">'+month+'</span>'+Edit_Designated_Array[i];}
if(i==2){return_value+='<span class="day">'+day+'</span>' +Edit_Designated_Array[i]+'<span class="week">'+week+'</span> ';}
if(i==3){return_value+='<span class="hour">'+hour+'</span>' +Edit_Designated_Array[i];}
if(i==4){return_value+='<span class="min">'+min+'</span>' +Edit_Designated_Array[i];}
if(i==5){return_value+='<span class="sec">'+sec+'</span>' +Edit_Designated_Array[i];}
if(i==6){return_value+='<span class="milli">'+milli+'</span>'+Edit_Designated_Array[i];}
}
return return_value;
}