javascriptでカウントダウンのレベルアップ版を作りたい!

よく配布されているもの(下)をもう少し工夫したもので・・・

------------------

<script type="text/javascript">
xday = new Date (2010, 10, 10, 0, 0, 0);
now = new Date ();
diff = xday.getTime() - now.getTime();
days = Math.ceil(diff / (1000 * 60 * 60 * 24));
document.write("xdayまで、あと" + days + "日です。");
</script>

------------------

「xday」をユーザに任意に設定させて、
さらにクッキーに保存、
そして次回からユーザごとのカウントダウンを表示させたいのです。


構想としては、初期設定としてoncllick、かなんかで、
同じページ内の「表示箇所」にカウントダウンを表示。

次回からは、読み込まれると「表示箇所」に自動でカウントダウン表示されているという感じです。

説明が悪いようなら補足いたします、よろしくお願いします。

回答の条件
  • 1人5回まで
  • 登録:2009/02/24 12:28:05
  • 終了:2009/03/02 18:26:00

ベストアンサー

id:Mars No.1

Mars回答回数203ベストアンサー獲得回数202009/02/25 10:53:36

ポイント100pt

ちょっと適当な部分もあると思いますが。

<html>
<head>
<title>カウントダウンサンプル</title>
</head>
<body>

<p id="date"><!-- 表示部 --></p>

<p><input type="text" id="countdownDate" sie="10" style="display:none"
	onkeypress="setCountdown(event)"
><input type="button" id="countdownEdit" value="カウントダウン設定" onclick="editMode(this)"></p>

<script type="text/javascript"><!-- /body 直前に -->
	var dt = getCookie();
	if(dt) {
		document.getElementById('date').innerHTML = countdownMsg(dt);
	}
function countdownMsg(dt){
	var mdt=new Date(dt);
	return mdt.getFullYear() + '/' + ( mdt.getMonth() + 1 ) + '/' + mdt.getDate() +
	'まで' + diffDay(dt) + '日です。';
}
function getCookie(){
	var ck = document.cookie;
	if(! ck) return false;
	return ( unescape(ck.split(/=/)[1]) );
}
function editMode(O){
	var dtO = O.parentNode;
	var ck = getCookie()||'YYYY/M/D';
	var countdowndate = document.getElementById('countdownDate');
	countdowndate.value=ck;
	countdowndate.style.display='inline';
	O.style.display='none';
	countdowndate.focus();
}
function setCountdown(event){
	if(event.keyCode != 13) return;
	var dtO = document.getElementById('countdownDate');
	var dt = dtO.value;
	var exp=new Date(dt);
	if(! exp.getTime()) {
		alert('Error');
		return;
	}
	exp.setDate(exp.getDate()+10); // ←ここでcookieの有効期限設定(設定日経過後?日)
	document.getElementById('date').innerHTML = countdownMsg(dt);
	dtO.style.display='none';
	document.getElementById('countdownEdit').style.display='inline';
	document.cookie = 'countdown=' + escape(dt) + '; expires=' + exp.toGMTString();
}
function diffDay(dt) {
	var xday = new Date(dt);
	if(! xday.getTime()) return 'Error';
	var now = new Date();
	var diff = xday.getTime() - now.getTime();
	return Math.ceil(diff / (1000 * 60 * 60 * 24));
}
</script>

</body>
</html>
id:tontonpokopoko

わざわざソースを丸ごと書いていただき大変恐縮です。

今から動作確認をしてみたいと思います。

本当にありがとうございました。

2009/02/25 18:42:21
  • id:tontonpokopoko
    Marsさま、
    このコメント欄は見ていただけないかもしれませんが、
    いろいろと自分でも試してみました。

    が、ちょっとレベルが追いつかず苦戦中です。

    クッキーで保存するものは日にちだけではなく、
    カウントダウンのほうがメインで、
    それを読み込まれたときに自動更新させたいのです。

    また「onkeypress」ではなく、ドロップダウンか1行テキストが理想です。

    もしこれをご覧になられたら、今1度助言をいただけると幸いです。

    よろしくお願いします。
  • id:Mars
    >クッキーで保存するものは日にちだけではなく、カウントダウンのほうがメインで、
    cookieには確かに入力した日付しか保存していませんが、
    表示するたびに、cookieの日付と「今日の日付」から算出してカウントダウン(設定した日付までの日数)を表示しているつもりでしたが不都合がありましたでしょうか?

    >ドロップダウンか1行テキストが理想
    ドロップダウンは作るのも利用者が入力するのも面倒(←私見ですが)なのでパスするとして、
    1行テキストとはどんなイメージでしょうか?(今も1行テキストのはずですが)
    htmlで書いてもらえるとイメージがわかりやすいかも。
  • id:tontonpokopoko

    コメントをありがとうございます。

    まずクッキーなのですが、
    私のローカル環境では初期設定で

    「YYYY/M/D」と表示されるところが、
    「100%」となってしまいます。

    そして日付設定をしたときには、表示箇所に正常に表示されますが、
    ページを更新すると「NaN/NaN/NaNまでError日です。」と戻るのです。

    原因はカウントダウン設定の箇所に何故か↓
    「2009/3/5; fsize」

    と日にちの横に「; fsize」が足されてます。

    また利用サーバにアップすると、今度は↓
    2009/3/4; 100705571X

    と、「; 100705571X」と付け加えられてしまいクッキーが反映されないのです。

    ただコメントをいただいて、
    もう1つのサーバにアップしたら正常に動作しました。

    1行テキストと書いたのは、
    実行のエンターキーを押すことがユーザに分かりづらいかな?と感じ、
    通常の「onclick」などのイベントハンドラで考えたからです。

    今までは正常に動作しないと思い、ますます深く考えていました。
    何か原因についてお分かりになるでしょうか・・・?

    よろしくお願いします。
  • id:Mars
    うまく動作しないケースについては、cookieまわりを手抜きしたからかもしれない。あまり自信ないけど。
    (既に在る同一ドメインのcookieを読んでしまっての誤動作?)

    設定する時、エンターで決定ではなく、別途ボタンがあるといい、というのはわかりました。

    修正版です。
    <html>
    <head>
    <title>カウントダウンサンプル</title>
    </head>
    <body>

    <p id="date"><!-- 表示部 --></p>

    <p><input type="text" id="countdownDate" sie="10" style="display:none"
    ><input type="button" id="countdownEdit" value="カウントダウン設定" onclick="editMode(this)"></p>

    <script type="text/javascript"><!-- /body 直前に -->
    var dt = getCookie();
    if(dt) {
    document.getElementById('date').innerHTML = countdownMsg(dt);
    }
    function countdownMsg(dt){
    var mdt=new Date(dt);
    return mdt.getFullYear() + '/' + ( mdt.getMonth() + 1 ) + '/' + mdt.getDate() +
    'まで' + diffDay(dt) + '日です。';
    }
    function getCookie(){
    var ck = document.cookie;
    if(! ck) return false;
    var cks = ck.split(';');
    for(var i=0;cks[i];i++){
    var pair=cks[i].split(/=/);
    if(pair[0] == 'countdown')
    return unescape(pair[1]);
    }
    return false;
    }
    function editMode(O){
    var ck = getCookie()||'YYYY/M/D';
    var countdowndate = document.getElementById('countdownDate');
    if(countdowndate.style.display == 'inline') {
    var exp=new Date(countdowndate.value);
    if(! exp.getTime()) {
    alert('Error');
    return;
    }
    exp.setDate(exp.getDate()+10); // ←ここでcookieの有効期限設定(設定日経過後?日)
    document.getElementById('date').innerHTML = countdownMsg(countdowndate.value);
    countdowndate.style.display='none';
    document.cookie = 'countdown=' + escape(countdowndate.value) + '; expires=' + exp.toGMTString();
    O.value = 'カウントダウン設定';
    } else {
    countdowndate.value=ck;
    countdowndate.style.display='inline';
    countdowndate.focus();
    O.value = '決定';
    }
    }
    function diffDay(dt) {
    var xday = new Date(dt);
    if(! xday.getTime()) return 'Error';
    var now = new Date();
    var diff = xday.getTime() - now.getTime();
    return Math.ceil(diff / (1000 * 60 * 60 * 24));
    }
    </script>

    </body>
    </html>
  • id:tontonpokopoko

    Marsさま、早速のコメントをありがとうございます。
    修正版を今試していますが、正常に動作しています。
    後ほどまた報告させていただきます。
  • id:tontonpokopoko
    Marsさま、この度は丁寧にスクリプトを書いていただきありがとうございました。
    また新たに追加したい箇所がありますので、
    はてなで新規に質問させていただきます。
    そのときに今回のコードを提示させていただきます。

    もしよろしければ、あたらな質問箇所にも、ご教授いただければ幸いです。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません