Webレターにカウントダウンを表示させたい

Question

次のようなカウントダウンタイマ付の無料登録用レターを
作りたいと思っているのですが、以下の要件をいれて作成するには
どのように作成すればいいのでしょうか？
（何が必要で、どのように、どの箇所にコードを書けばいいのか）
ーーーーーーーーーーーーーーーー
定義：「あと４日」からスタートする場合

要件
・このページを初めて開いた段階からカウントダウンスタート
・Cookie（他の方法でもよい）により、残り日数が引き継がれている
（つまり一度閉じてあくる日にみてもレターを一度みた時からのカウントが進んでいる）
・日数が終了したら、メルアドのフォームとボタンが消え、
「登録受付は終了しました」と表示させたい
ーーーーーーーーーーーーーーーー

Webレターイメージ
https://gyazo.com/9c43dce88861ff4ea38721d9cf9c9ec3

以上ご教示お願いします。

Comments

[takito]

そのフォーム画面のHTMLは作られましたか？ご自身で作ったものが少しでもあるなら、そのソースコードを掲載された方がアドバイスもされやすくなると思いますよ。

[akkkkin]

そうですね。そうします。ご丁寧にありがとうございます。

Answer 1

こんな感じでいかがでしょうか？
JavaScriptのendDateTimeを設定しているところに
現在より少し先の日時を設定することで、
残り時間がなくなった時の動作確認ができます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>
	function setCookie(c_name, value, expiredays) {
		// pathの指定
		var path = location.pathname;
		// pathをフォルダ毎に指定する場合のIE対策
		var paths = new Array();
		paths = path.split("/");
		if(paths[paths.length-1] != "") {
			paths[paths.length-1] = "";
			path = paths.join("/");
		}
		// 有効期限の日付
		var extime = new Date().getTime();
		var cltime = new Date(extime + (60 * 60 * 24 * 1000 * expiredays));
		var exdate = cltime.toUTCString();
		// クッキーに保存する文字列を生成
		var s="";
		s += c_name +"="+ escape(value);// 値はエンコードしておく
		s += "; path="+ path;
		if(expiredays) {
			s += "; expires=" +exdate+"; ";
		}
		else {
			s += "; ";
		}
		// クッキーに保存
		document.cookie=s;
	}

	function GetCookie(name) {
		var result = null;
	
		var cookieName = name + '=';
		var allcookies = document.cookie;
	
		var position = allcookies.indexOf( cookieName );
		if( position != -1 ) {
			var startIndex = position + cookieName.length;
	
			var endIndex = allcookies.indexOf( ';', startIndex );
			if( endIndex == -1 ) {
				endIndex = allcookies.length;
			}
	
			result = decodeURIComponent(
				allcookies.substring( startIndex, endIndex ) );
		}
	
		return result;
	}

	var visit_time = parseInt(GetCookie("visit_time"));
	var startDateTime;

	if(visit_time) {
		startDateTime = new Date(visit_time);
	}
	else {
		startDateTime = new Date();

		// クッキーをセット
		setCookie('visit_time', startDateTime.getTime(), 30);
	}

	function countDown() {
		var nowDateTime = new Date();
	
		var i=4;	// 終了までの日数
		var tmp = i*24*60*60*1000;
	
		var endDateTime = new Date(startDateTime.getTime() + tmp);
	
		var left = endDateTime - nowDateTime;
		var a_day = 24 * 60 * 60 * 1000;
	
		var d = Math.floor(left / a_day);
	
		var h = Math.floor((left % a_day) / (60 * 60 * 1000));
		h = ('0' + h ).slice( -2 );
	
		var m = Math.floor((left % a_day) / (60 * 1000)) % 60;
		m = ('0' + m ).slice( -2 );
	
		var s = Math.floor((left % a_day) / 1000) % 60 % 60;
		s = ('0' + s ).slice( -2 );
	
		if(left > 0) {
			$("#TimeLeft").html('終了まであと ' + d + '日' + h + '時間' + m + '分' + s + '秒');
		}
		else {
			$("#TimeLeft").html('登録受付は終了しました。');
			$("#form").hide();
		}
	
		setTimeout('countDown()', 1000);
	}

	$(function() {
		countDown();
	});
</script>

<div id="TimeLeft"></div>

<div id="form">
	ここに書かれた内容は、時間が来ると非表示になります。
</div>

Comments

[akkkkin]

分かりやすい解説ありがとうございます。