[js]キャンペーンや締め切り日を100分の1秒までカウントするタイマーを作りました

スポンサードリンク

[js]キャンペーンや締め切り時をカウントするタイマーを作りました

いつも使わせてもらってるカウントダウンタイマーが先日サイトごと2日間くらいごっそり落ちていたので、その間の代替用として書いたものをシェアしますね。そのままご利用頂いて結構です。適当に使って下さい。

カウントダウンタイマー

こんなタイマーです。年月日と時間、分だけでなく、100分の1秒まで計ることができる、焦らし効果抜群のタイマーになっています。デザインはcssから自分で変更して下さい。

カウントが終了すると、次のように表示されます（文言は変更できます）。

カウントダウン終了時

head内に追加

HTMLのhead内に以下を記述します。「キャンペーン終了まであと」などの文言を編集できます。

CountdownTimer.prototype = 	{

/**
	 * Constructor
	 */
	initialize: function( elemID, timeLimit, limitMessage, msgClass ) {
		this.elem = document.getElementById( elemID );
		this.timeLimit = timeLimit;
		this.limitMessage = limitMessage;
		this.msgClass = msgClass;
	},

/**
	 * カウントダウン
	 */
	countDown : function()	{
		var	timer;
		var	today = new Date()
		var	days = Math.floor( ( this.timeLimit - today ) / ( 24 * 60 * 60 * 1000 ) );
		var	hours = Math.floor( ( ( this.timeLimit - today ) % ( 24 * 60 * 60 * 1000 ) ) / ( 60 * 60 * 1000 ) );
		var	mins = Math.floor( ( ( this.timeLimit - today ) % ( 24 * 60 * 60 * 1000 ) ) / ( 60 * 1000 ) ) % 60;
		var	secs = Math.floor( ( ( this.timeLimit - today ) % ( 24 * 60 * 60 * 1000 ) ) / 1000 ) % 60 % 60;
		var	milis = Math.floor( ( ( this.timeLimit - today ) % ( 24 * 60 * 60 * 1000 ) ) / 10 ) % 100;
		var	me = this;

if( ( this.timeLimit - today ) > 0 ){
			timer = 'キャンペーン終了まであと<br />' + days + '日' + this.addZero( hours ) + '時間' + this.addZero( mins ) + '分'+ this.addZero( secs ) + '秒'  + this.addZero( milis ) + ' です。'
			this.elem.innerHTML = timer;
			tid = setTimeout( function() { me.countDown(); }, 10 );

}else{
			this.elem.innerHTML = this.limitMessage;
			if( this.msgClass )	{
				this.elem.setAttribute( 'class', this.msgClass );
			}
			return;
	        }
	},

/**
	 * ゼロを付与
	 */
	addZero : function( num )	{
		num = '00' + num;
		str = num.substring( num.length - 2, num.length );

return str ;
	}
}

// end of JavaScript -->
</script>