アクセス時からのカウントダウンタイマー設置

質問

初回アクセスしたら3日後にカウントが終了するタイマーをつくりたいです。
2回目に訪問しても初回からのタイマーが表示されて
3日後には「受付は終了しました」と別ページに飛ばして表示させたいです。

初めての訪問者にはすべて3日後に終了するようにしたいので、
それぞれ、終了日が違います。

・・・・というカウントダウンタイマーをJavaScriptで作りたいです。
よろしくお願い致します。

回答No.4

Proof4 · ベストアンサー

No.3の補足コメントに対して回答します。

出力フォーマットは変えずに対応します。
　let tmp_min = divmod(tmp_hour[1], 60)
の次の行に
　let tmp_sec = String(tmp_min[1]).split(".")
を追加し、続く2行を
　rem_time = dayjs(new Date(null, null, tmp_day[0], tmp_hour[0], tmp_min[0], tmp_sec[0]))
　out = rem_time.format(output_format) + tmp_sec[1].substring(0, 1)
のように書き換えます。
スクリプトの最終行
　}, 1000)
を
　}, 100)
にすることで表示を100msごとに更新します。

substring(0, 1)の1を大きく、スクリプト最終行の数値を小さくすれば表示・更新できるミリ秒の桁数を増やすことができます。
しかし、すべての桁数をリアルタイムで更新することは負荷をかけすぎるため好ましくありません。
人間の認識可能な時間変化も考慮すれば、表示は1桁程度にとどめておくのがよいでしょう。

お礼

申し訳ありません。私が間違っていました！
いろいろと教えていただき、心よりお礼申し上げます。
大変助かります。ありがとうございました！！

補足

何度もご丁寧にありがとうございます！了解しました。

ただ、申し訳ありません、検証したのですが

// キャンペーン終了時
out = finish_message
clearInterval(campaign_mainloop) // ループ処理止める
window.location.href = "ＵＲＬ";
}

これだと、時間が経過して0になったら、指定のＵＲＬに飛ばずに、
またカウンターが最初からに戻ってしまいます。
何がいけないのでしょうか？

回答No.3

Proof4

No.1の補足コメントに対して回答します。

補足コメントの通りで動作します。
ページ遷移してしまうので、
// キャンペーン終了時
out = finish_message
clearInterval(campaign_mainloop) // ループ処理止める
のブロックを
window.location.href = 移動先のパス;
で置換しても動作します。

補足

何度もありがとうございます！申し訳ありません最後にもうひとつお伺いしてもよろしいでしょうか。
◎分◎秒▲　のミリ秒まで表示させたい時は

// 残り時間が正の時
let tmp_day = divmod(rem_seconds, 86400)
let tmp_hour = divmod(tmp_day[1], 3600)
let tmp_min = divmod(tmp_hour[1], 60)
ここの計算式に付け足す必要がありますか？
それとも
const output_format = "キャンペーン終了まで<br>残りD日HH時mm分ss秒" // 出力フォーマット
ここの出力に何か加えるだけで実現できますか？

回答No.2

ubku

何をもって初回アクセスとするかですね。
JavaScript だけでは期待通りにはならないでしょう。JavaScript はクライアント側の処理系だからです。

まず、初回訪問日時をサーバー側で管理する必要があります。そうしなければ、クライアント側で初回訪問日時をリセットできてしまいます。たとえばCookieを削除すると初回に戻ります。シークレットウインドウやプライベートウインドウで開けば常に初回アクセスとなります。

なのでサーバー側で初回訪問日時を記録します。

そして誰がアクセスしてきたのかを知る必要があります。通常、ユーザーIDとパスワードでアクセス元を管理することになります。

受付ページでは、初回訪問日時から3日過ぎていれば終了ページに飛ばす、という処理をサーバー側で行います。これをクライアント側で行う事もできますが、ユーザーの環境で JavaScript が無効にされていたら機能しないでしょう。

クライアント側の処理系である JavaScript は本件のような処理は担当すべきではありません。
時間が来たら別のページに飛ばす、などは出来ますが、これもユーザーの環境次第なので、頼ってはいけません。

どうしても JavaScript でやるのであれば、
初回アクセス日時を Cookie に保存、2回目以降は Cookie を見て残り時間をタイマーにセットするような流れになると思います。

補足

ありがとうございます！分かりやすく説明いただきありがとうございます。
それをコードにしていただくことは可能でしょうか。
実現できればJavaScriptにこだわりはありません。実例のソースが欲しいです。申し訳ありません。

回答No.1

Proof4

過去に同様の質問に回答しましたのでそちらが参考になると思います。
https://okwave.jp/qa/q9648685/a26959899.html

カウント終了後には別ページに飛ばして表示させたいとのことですので、上記URLのソースコードにある
// キャンペーン終了時
の部分を
window.location.href = 移動先のパス;
と書き換えればよいでしょう。

補足

ありがとうございます！まさに！この実例で大丈夫です。
・・・なんですがキャンペーンの書き換えは

// キャンペーン終了時
out = finish_message
clearInterval(campaign_mainloop) // ループ処理止める
window.location.href = 移動先のパス;
}
display_area.innerHTML = out
}, 1000)

こうですか？