決めた時間までのタイムリミット表示

Question

例えば15時という時間の制限を決めて
webページ内に「あと○時間○分」というような表示をさせたいです。

当方javascriptは初心者ですので、多少読めるようにはなりましたが書けません。
どのようなコードを記述すれば実装できるでしょうか？

どなたかご教授くださいませ。

Answer 1

まず、必要な物は何なのかから考えよう。

1. 計算
2. 出力

これだけなので超簡単だと思うのですが...
もっと細かく考えてみましょう。

1. 指定時間
2. 現在の時間
3. 式
4. 出力

これだけですね。
ではやりたい事をどう実装するか、それは上にあるリストの事について調べる事

っで結論から言うと、実装したい機能は基本的に「現在の時間」を取得すれば後は式書くだけなので、
現在の時間取得について調べると、以下のページが見つかる

http://www.pori2.net/js/date/1.html

あとは、現在時間と指定時間の差を計算するだけ。

Answer 2

// 閉店時間を指定
var closing = 15;

function diffCalculation(){
    // 現在の時間を取得
    var nowDate = new Date();
    
    // 現在時刻が閉店時間以降の場合翌営業日の日付を指定
    if(nowDate.getHours() >= closing){
    	// getDayで曜日を取得し、休日の前であれば指定日をずらす
    	switch(nowDate.getDay()){
    		// 金曜日の場合3日ずらす
    		case 5:
    			var targetDate = new Date(nowDate.getFullYear(),nowDate.getMonth(),nowDate.getDate() + 3,closing,0,0);
    			break;
    		// 土曜日の場合2日ずらす
    		case 6:
    			var targetDate = new Date(nowDate.getFullYear(),nowDate.getMonth(),nowDate.getDate() + 2,closing,0,0);
    			break;
    		// それ以外の曜日の場合1日ずらす
    		default:	
    			var targetDate = new Date(nowDate.getFullYear(),nowDate.getMonth(),nowDate.getDate() + 1,closing,0,0);
    			break;
    	}
    }else{
    	// 現在時刻が閉店時間以前の場合今日の日付を指定
    	var targetDate = new Date(nowDate.getFullYear(),nowDate.getMonth(),nowDate.getDate(),closing,0,0);
    };

    // 1970-01-01 00:00:00からのミリ秒に変換
    var dnumNow = nowDate.getTime();
    var dnumTarget = targetDate.getTime();

    // 指定時間から現在の時間を引く
    var diff = dnumTarget - dnumNow;

    // ミリ秒を分解
    var days = diff / ( 1000 * 60 * 60 * 24 );   // 日数
    
    diff = diff % ( 1000 * 60 * 60 * 24 );
    var hour = diff / ( 1000 * 60 * 60 );    // 時間

    diff = diff % ( 1000 * 60 * 60 );
    var min = diff / ( 1000 * 60 );    // 分

    diff = diff % ( 1000 * 60 );
    var sec = diff / 1000;    // 秒

    // 計算された時差をまとめる
    if(Math.floor(days) == 0){
    	var diffmsg = Math.floor(hour) + "時間" + Math.floor(min) + "分" + Math.floor(sec) + "秒";
	}else{
		var diffmsg = Math.floor(days) + "日と" + Math.floor(hour) + "時間" + Math.floor(min) + "分" + Math.floor(sec) + "秒";
	}
    var msg = "あと" + diffmsg;

    // 出力
    document.getElementById("Countdown").innerHTML = msg;
    console.dir(msg);
}
setInterval('diffCalculation()',1000);

超適当ですが。
getDay()で曜日を取ってswitchで判定しているだけですので、別の曜日が休みの場合そこの数字を変えるだけでおｋです。

Comments

[YuichiKataoka]

ありがとうございます。使ってみます！

[YuichiKataoka]

お世話になります。
先日のscriptですが、以下のようにしているのですが

<script>
// カウントダウンタイマーscript
var closing = 15; // 閉店時間を指定

function diffCalculation(){
// 現在の時間を取得
var nowDate = new Date();

// 現在時刻が閉店時間以降の場合翌営業日の日付を指定
if(nowDate.getHours() >= closing){
// getDayで曜日を取得し、休日の前であれば指定日をずらす
switch(nowDate.getDay()){
// 土曜日の場合2日ずらす
case 6:
var targetDate = new Date(nowDate.getFullYear(),nowDate.getMonth(),nowDate.getDate() + 2,closing,0,0);
break;
// それ以外の曜日の場合1日ずらす
default:
var targetDate = new Date(nowDate.getFullYear(),nowDate.getMonth(),nowDate.getDate() + 3,closing,0,0);
break;
}
}else{
// 現在時刻が閉店時間以前の場合今日の日付を指定
var targetDate = new Date(nowDate.getFullYear(),nowDate.getMonth(),nowDate.getDate(),closing,0,0);
};

// 1970-01-01 00:00:00からのミリ秒に変換
var dnumNow = nowDate.getTime();
var dnumTarget = targetDate.getTime();

// 指定時間から現在の時間を引く
var diff = dnumTarget - dnumNow;

// ミリ秒を分解
var days = diff / ( 1000 * 60 * 60 * 24 ); // 日数

diff = diff % ( 1000 * 60 * 60 * 24 );
var hour = diff / ( 1000 * 60 * 60 ); // 時間

diff = diff % ( 1000 * 60 * 60 );
var min = diff / ( 1000 * 60 ); // 分

diff = diff % ( 1000 * 60 );
var sec = diff / 1000; // 秒

// 計算された時差をまとめる
if(Math.floor(days) == 0){
var diffmsg = Math.floor(hour) + "時間" + Math.floor(min) + "分" + Math.floor(sec) + "秒";
}else{
var diffmsg = Math.floor(days) + "日と" + Math.floor(hour) + "時間" + Math.floor(min) + "分" + Math.floor(sec) + "秒";
}
var msg = "あと" + diffmsg;

// 出力
document.getElementById("Countdown").innerHTML = msg;
console.dir(msg);
}
setInterval('diffCalculation()',1000);
</script>

「現在時刻が閉店時間以前の場合今日の日付を指定」の部分なのですが
例えば今日日曜日だと、残りの時間は「本日の残り15時までの時間 + 24時間」としたいのですが、出来ません。（今日の15時までの時間が表示されてしまいます）

教えて頂けましたら幸いです。
よろしくお願い致します。

Answer 3

どうしても自分で書きたいというのでなければ、
こちらのプラグインがデザインのカスタマイズもし易くて使いやすかったです。
http://yyengine.jp/jquery-yycountdown/

Answer 4

すみません、解答そのまま書いちゃう形になるんですけど途中まで書いてしまったので……
promptのエラー処理とか書いてないのでその辺りはご自身でお願いいたします。

// 時間の入力
var inputHour = prompt("指定時間", "15");

function diffCalculation(){
	// 現在の時刻を取得
	var nowDate = new Date();

	// 入力された時間を元にオブジェクトを生成
	// 分と秒は0を入れる
	var targetDate = new Date(nowDate.getFullYear(),nowDate.getMonth() + 1,nowDate.getDate(),inputHour,0,0);

	// 1970-01-01 00:00:00からのミリ秒に変換
	var dnumNow = nowDate.getTime();
	var dnumTarget = targetDate.getTime();

	// 指定時間から現在の時間を引く
	var diff = dnumTarget - dnumNow;

	// ミリ秒を分解
	// ここもうちょっとうまく書けそう
	diff = diff % ( 1000 * 60 * 60 * 24 );
	var hour = diff / ( 1000 * 60 * 60 );	// 時間

	diff = diff % ( 1000 * 60 * 60 );
	var min = diff / ( 1000 * 60 );	// 分

	diff = diff % ( 1000 * 60 );
	var sec = diff / 1000;	// 秒

	// 計算された時差をまとめる
	var diffmsg = Math.floor(hour) + "時間" + Math.floor(min) + "分" + Math.floor(sec) + "秒";

	if(dnumTarget > dnumNow){
		// まだ期限が来ていない場合
		var msg = "あと" + diffmsg;
	}else{
		// 期限が過ぎた場合
		var msg = "もう過ぎたよ。";
	}

	// 出力
	document.getElementById("Countdown").innerHTML = msg;
}
setInterval('diffCalculation()',1000);

Comments

[YuichiKataoka]

確認が遅れてしまい、返事が遅くなってしまい申し訳ありませんでした。

こちらのプログラムが分かりやすいので、これをカスタマイズして使わせて頂きます。
ありがとうございました。

[YuichiKataoka]

回答頂いた後ですみません、当方ECサイトに設置しようと思うのですが
日曜日や、祝日の場合に翌営業日の15時までのタイムリミットを表示したいのですが、このような場合はどうしたら良いでしょうか？

例：土曜日の15時過ぎには、翌日15時まででは無く「（翌営業日）月曜日の15時までの時間を表示する」としたいです。