お知らせのレターをカウントダウンタイマー付きで案内できるようにしたい

解決したいことは、
「お知らせのレターをカウントダウンタイマー付きで案内できるようにしたい」
です。

URLをクリックして、お知らせのレターをみると、4日間の限定でカウントダウンタイマーを表示したいです。

例：モニター募集終了まで :●日と●●時間●●分●●秒●●

という感じて設定したく思っています。

終了したら、申し込みフォームの箇所に、
「募集は終了しました」と表示させ、申込フォームが消えているという状態を作りたいです。

やったこと

cdt.jsを設置

function CountdownTimer(elm,tl,mes){
this.initialize.apply(this,arguments);
}
CountdownTimer.prototype={
initialize:function(elm,tl,mes) {
this.elem = document.getElementById(elm);
this.tl = tl;
this.mes = mes;
},countDown:function(){
var timer='';
var today=new Date();
var day=Math.floor((this.tl-today)/(24*60*60*1000));
var hour=Math.floor(((this.tl-today)%(24*60*60*1000))/(60*60*1000));
var min=Math.floor(((this.tl-today)%(24*60*60*1000))/(60*1000))%60;
var sec=Math.floor(((this.tl-today)%(24*60*60*1000))/1000)%60%60;
var milli=Math.floor(((this.tl-today)%(24*60*60*1000))/10)%100;
var me=this;
if( ( this.tl - today ) > 0 ){
if (day) timer += '<span class="day">'+day+'日と</span>';
if (hour) timer += '<span class="hour">'+hour+'時間</span>';
timer += '<span class="min">'+this.addZero(min)+'分</span><span class="sec">'+this.addZero(sec)+'秒</span><span class="milli">'+this.addZero(milli)+'</span>';
this.elem.innerHTML = timer;
tid = setTimeout( function(){me.countDown();},10 );
}else{
this.elem.innerHTML = this.mes;
return;
}
},addZero:function(num){ return ('0'+num).slice(-2); }
}

function CDT(){
var text = 'モニター募集終了まで :<br class="visible-xs-block">';
var tl = new Date('2017/05/22 23:59:59');
var timer = new CountdownTimer('CDT',tl,'終了しました。');
timer.countDown();
target = document.getElementById("text");
target.innerHTML = text;
}

window.onload=function(){
CDT();
}

都度終了したい日時を手動で設定しております。

そしてカウントダウンを表示させたいindex.htmlファイルの箇所には以下を記述。

 <span class="timetext" id="text"></span><span id="CDT"></span>

と記述しております。

よって、ユーザーが入ってきたら、都度終了日時を手動で設定しないといけない、
日時が終了しても申し込みフォームが表示されたままで
募集は終了しました、と文言を都度追記している状況です。

詳しい方がいらっしゃれば是非とも具体的にどのようにコードを書けばいいのか
ご教示いただきたく思います。

よろしくお願いいたします。

【追記】
ユーザーの情報として、ストアコード(scode）,メールIDmailidを保持しております。

Lhankor_Mhy

2017/05/27 08:26 編集

仕様をもう少し詳しくお願いします。　ユーザーAがPCでX日にアクセス、ユーザーBがX+1日にアクセス、ユーザーAがモバイルでX+2日にアクセスした場合、X+3日時点での「ユーザーAがPCでアクセス」「ユーザーBがアクセス」「ユーザーAがモバイルでアクセス」した際の動作はどのようになりますか？

akkkkin

2017/05/27 09:07

返信ありがとうございます。どうしようかと悩んでおりまして、質問をくださり非常にありがたいです。詳細下記に記載いたします。ユーザーAがPCでX日にアクセス、ユーザーBがX+1日にアクセス、ユーザーAがモバイルでX+2日にアクセス、 X+３日時点ではユーザーA（PC）→23：59:59に受付終了ユーザーB　→　残り１日ユーザーA（モバイル)　→23：59:59に受付終了となります。ちなみに案内はステップメール内に上記のカウントダウン付きレターのリンクを記載しています。つまり、レターの配信があった日（X）から+３日後に締め切りとなります。ステップメールで設定してありますので、訪れるタイミングはユーザーごとに異なります。例えば、 5月27日にレターの案内を受ける人 6月2日にレターの案内を受ける人 6月7日にレターの案内を受ける人 7月7日にレターの案内を受ける人などなどです。

Lhankor_Mhy

2017/05/27 09:36

URLにトラッキングコードを仕込んで、アクセスがあったらユーザーとひも付けてタイムスタンプをDBに記録し、再アクセスがあった時にタイムスタンプを参照して残り時間を表示すればいいのでは。

akkkkin

2017/05/27 10:01

上記ありがとうございます。誠に恐縮なのですが、具体的にどのようにかけばいいのでしょうか？もし何か見本となるURLがありましたらありがたいです。

Lhankor_Mhy

2017/05/27 10:15

mcryptとかでユーザーIDとかを暗号化すればいいんじゃないでしょうか。

行動規範の内容に同意します

回答3件

処理方法としては、特定のトリガー（たとえばボタンを押すとか）により
終了時間を設定して、それを超えるまで定期的にチェックをつづけます

クライアント時間を利用する

終了時間にクライアントの時計を利用する場合の時計がずれていた時想定した結果がえられません
またトリガーの発動後ユーザーが任意に時計を変更することで簡単に不正をすることが可能です

サーバー時間を利用する

サーバーに一定の負担はかかりますが、定期的にサーバーに時間を確認しにいくことが
間違いのない対応でしょう

投稿2017/05/15 01:21

yambejp

総合スコア114757

akkkkin

2017/05/15 01:41

コメントありがとうございます。具体的にどのようにコードを書けばいいのでしょうか？

yambejp

2017/05/15 01:49 編集

サーバーが返してくれるということでよいですか？であればajaxで文字列を取りに行くだけですサーバー側の言語は何を利用していますか？

akkkkin

2017/05/15 02:31

はい、ありがとうございます。＞サーバー側の言語は何を利用 PHPを利用しております。

行動規範の内容に同意します

不特定多数のユーザーを対象に動作させるのか、それとも、データベースに登録されているユーザーを対象に動作させるのかによって、変わってきそうです。

不特定多数のユーザーですと、異なる端末やブラウザーでアクセスされたら、また、カウントダウンタイマーが最初からになりそうな気がしますが。同一IPで同じユーザーであると判定する場合はIP変わったらダメですし、ブラウザー側のクッキーを使って同じユーザーであると判定する場合はブラウザー変わったり、キャッシュをクリアされたらダメですし。

投稿2017/05/15 03:44