次のようなカウントダウンタイマ付の無料登録用レターを
作りたいと思っているのですが、以下の要件をいれて作成するには
どのように作成すればいいのでしょうか?
(何が必要で、どのように、どの箇所にコードを書けばいいのか)
ーーーーーーーーーーーーーーーー
定義:「あと4日」からスタートする場合
要件
・このページを初めて開いた段階からカウントダウンスタート
・Cookie(他の方法でもよい)により、残り日数が引き継がれている
(つまり一度閉じてあくる日にみてもレターを一度みた時からのカウントが進んでいる)
・日数が終了したら、メルアドのフォームとボタンが消え、
「登録受付は終了しました」と表示させたい
ーーーーーーーーーーーーーーーー
Webレターイメージ
https://gyazo.com/9c43dce88861ff4ea38721d9cf9c9ec3
以上ご教示お願いします。
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
checkベストアンサー
0
こんな感じでいかがでしょうか?
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>
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう!
- ただいまの回答率 88.32%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
質問への追記・修正、ベストアンサー選択の依頼
2016/06/02 13:05
こちらの質問が他のユーザから「やってほしいことだけを記載した丸投げの質問」という指摘を受けました
「質問を編集する」ボタンから編集を行い、調査したこと・試したことを記入していただくと、回答が得られやすくなります。
takito
2016/06/02 17:38
そのフォーム画面のHTMLは作られましたか?ご自身で作ったものが少しでもあるなら、そのソースコードを掲載された方がアドバイスもされやすくなると思いますよ。
akkkkin
2016/06/02 23:38
そうですね。そうします。ご丁寧にありがとうございます。