カウントアップ・カウントダウン
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>サンプル</title>
<style type="text/css">
<!--
input {
	ime-mode: disabled;
}
-->
</style>
<script type="text/javascript">
<!--
function countTimer() {
	var obj = document.form1;
	var year = obj.year.value;
	var month = obj.month.value;
	var day = obj.day.value;
	var hour = obj.hour.value;
	var min = obj.min.value;

	var str_first = "指定した日時から ";
	var str_end = " 経過しています。";

	if (year.match(/^\d{4}$/) && month <= 12 && day <= 31 && hour <= 23 && min <= 59) {
		var now = new Date().getTime() / 1000;						// 現在の時間（秒）
		var set = new Date(year, month - 1, day, hour, min, 0).getTime() / 1000;	// 入力された時間（秒）

		var remain = Math.round(now - set);						// 差時間を取得（秒）
		if (remain <= 0) {
			str_first = "指定した日時まであと ";			// 入力された値が未来の時間ならば
			str_end = " です。";					// 入力された値から現在の値を引く
			remain = Math.round(set - now);
		}
		var result_year = Math.floor(remain / (60 * 60 * 24 * 365));		// 1年: 31536000秒

		remain -= result_year * 60 * 60 * 24 * 365;
		var result_month = Math.floor(remain / (60 * 60 * 24 * 30));		// 1ヶ月: 2592000秒

		remain -= result_month * 60 * 60 * 24 * 30;
		var result_day = Math.floor(remain / (60 * 60 * 24));			// 1日: 86400秒

		remain -= result_day * 60 * 60 * 24;
		var result_hour = Math.floor(remain / (60 * 60));			// 1時間: 3600秒

		remain -= result_hour * 60 * 60;
		var result_min = Math.floor(remain / 60);				// 1分: 60秒

		remain -= result_min * 60;
		var result_sec = Math.floor(remain);

		document.getElementById("show").innerHTML =
			str_first + result_year + "年" + result_month + "ヶ月" + result_day + "日 " +
			result_hour + "時間" + result_min + "分" + result_sec + "秒" + str_end;

		setTimeout("countTimer();", 1000);
	}
	else {
		alert("正しい数値を入れてください。");
		return;
	}
}
// -->
</script>
</head>
<body>
<span id="show">&nbsp;</span>
<form action="#" name="form1">
<input type="text" name="year" value="2003" size="4" maxlength="4">年
<input type="text" name="month" value="2" size="2" maxlength="2">月
<input type="text" name="day" value="25" size="2" maxlength="2">日
<input type="text" name="hour" value="0" size="2" maxlength="2">時
<input type="text" name="min" value="0" size="2" maxlength="2">分
<input type="button" value="表示" onclick="countTimer();">
</form>
</body>
</html>

 

年 月 日 時 分

○○から何日？、○○まで何日？というような指定した日時からの差し引き時間を取得するものです。

はじめに各フォームの値を取得して、その値（日付）を秒数に変換してさらに、現在の時間からの差時間を取得します。もし、フォームに入力された日付が現在よりも未来の時間ならば、入力された値から現在の値を差し引いて取得します。

ここで取得した差時間の値（変数 remain）をそれぞれの項目（年月日時間）で割って値を取得します。

たとえば、今からちょうど1年と1日後を入力したとします。1年間を秒数にすると31536000秒（60秒 * 60分 * 24時間 * 365日）、1日を秒数にすると86400秒（60秒 * 60分 * 24時間）になりますので、変数 remain の値は 31622400 になります。取得する日付は Math.floor() で整数値にしておきます。

＼ 式の内容 式の結果（実際の値）
年 result_year = Math.floor(remain / (60 * 60 * 24 * 365)); 1 = Math.floor(31622400 / (60 * 60 * 24 * 365));
月 remain = remain - (result_year * 60 * 60 * 24 * 365);
result_month = Math.floor(remain / (60 * 60 * 24 * 30));		 86400 = 31622400 - (1 * 60 * 60 * 24 * 365);
0 = Math.floor(86400 / (60 * 60 * 24 * 30));
日 remain = remain - (result_month * 60 * 60 * 24 * 30);
result_day = Math.floor(remain / (60 * 60 * 24));		 86400 = 86400 - (0 * 60 * 60 * 24 * 30);
1 = Math.floor(86400 / (60 * 60 * 24));
時 remain = remain - (result_day * 60 * 60 * 24);
result_hour = Math.floor(remain / (60 * 60));		 0 = 86400 - (1 * 60 * 60 * 24);
0 = Math.floor(0 / (60 * 60))
分 remain = remain - (result_hour * 60 * 60);
result_min = Math.floor(remain / 60);		 0 = 0 - (0 * 60 * 60);
0 = Math.floor(0 / 60);
秒 remain = remain - (result_min * 60);
result_sec = Math.floor(remain);		 0 = 0 - (0 * 60);
0 = Math.floor(0);

この例では、指定したエレメントに表示します。

カウントダウンが終了したら任意の処理をする
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>サンプル</title>
<script type="text/javascript">
<!--
// カウントダウン終了日時を記述してください
var setyear = 2002;
var setmonth = 2;
var setday = 25;
var sethour = 18;
var setmin = 30;

var set = new Date(setyear, setmonth - 1, setday, sethour, setmin, 0).getTime() / 1000;
function countdown() {
	var now = new Date().getTime() / 1000;
	var remain = Math.round(set - now);

	var result_year = Math.floor(remain / (60 * 60 * 24 * 365));

	remain -= result_year * 60 * 60 * 24 * 365;
	var result_month = Math.floor(remain / (60 * 60 * 24 * 30));

	remain -= result_month * 60 * 60 * 24 * 30;
	var result_day = Math.floor(remain / (60 * 60 * 24));

	remain -= result_day * 60 * 60 * 24;
	var result_hour = Math.floor(remain / (60 * 60));

	remain -= result_hour * 60 * 60;
	var result_min = Math.floor(remain / 60);

	remain -= result_min * 60;
	var result_sec = Math.floor(remain);

	if (result_hour < 10) result_hour = "0" + result_hour;
	if (result_min < 10) result_min = "0" + result_min;
	if (result_sec < 10) result_sec = "0" + result_sec;

	document.getElementById("show").innerHTML = "新しいページに移動するまであと " +
		result_year + "年" + result_month + "ヶ月" + result_day + "日 " +
		result_hour + "時間" + result_min + "分" + result_sec + "秒 です。";

	var stop = setTimeout("countdown();", 1000);

	// カウントダウン終了時の処理
	if (set < now) {
		clearTimeout(stop);

		location.replace("./new.html");
	}
}

window.onload = countdown;
// -->
</script>
</head>
<body>
<span id="show">&nbsp;</span>
</body>
</html>

まず初めにカウントダウンを終了したい日時を設定します。変数 setyear に年、変数 setmonth に月、変数 setday に日、変数 sethour に時間、変数 setmin に分を記述してください。カウントダウンの終了は if (set < now) によって終了後の処理を行います。

この例では location.replace にて移動先のページ (new.html) を読み込みます。なお、設定した日時以降に上記のスクリプトを追加したページにアクセスすると new.html が表示されます。

[PR] Yahoo!ショッピング