人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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、かなんかで、
同じページ内の「表示箇所」にカウントダウンを表示。

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

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

●質問者: tontonpokopoko
●カテゴリ:コンピュータ ウェブ制作
✍キーワード:24 Days diff JavaScript Write
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● Mars
●100ポイント ベストアンサー

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

<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>
◎質問者からの返答

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

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

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ