javascriptでカウントダウンを作っています。

Question

tontonpokopoko

41

38もっと見る

100pt

コンピュータウェブ制作

javascriptでカウントダウンを作っています。

前回のここでの質問で、以下のようなスクリプトをいただきました。
文字制限があったため、コメント欄に表示しています。
（ユーザに日付を入力してもらいクッキーで保存するタイプ）

今回はさらにもう少し使い勝手をよくしたいと思っています。
欲しい追加箇所は次の2点です。

①当日とカウントアップの表示を今のものと別にしたい。
こんな感じ↓
http://www.ookawa.com/soft/hp/countdown/countdown.html

②カウントダウン日数によって表示を追記したい。
現在の「YYYY/M/Dまで＊日です。」のあとに、
例えば１～１０日以内になれば、「YYYY/M/Dまで＊日です。」「もうすぐです。」
２０～３０日以内であれば、「YYYY/M/Dまで＊日です。」「近づいてきました。」
３０日後であれば、「YYYY/M/Dから＊日です。」「1ヶ月が経過しました。」
という感じです。

当方の知識相応の質問ではありませんが、
どうぞよろしくお願いいたします。

回答の条件

1人5回まで

登録：2009/03/08 17:38:47
終了：2009/03/09 18:05:48

※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

tontonpokopoko 2009/03/08 17:39:09

<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">
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>
Mook 2009/03/09 22:59:51

>「YYYY/M/Dに半角数字を記入、例(2009/9/9)」
<p id="date">2009/9/9</p>
としておけばよいです。

>また参考までに・・・・
関数部分を下記のようにしてどうでしょうか。

function countdownMsg( dt ) {
var dd = diffDay( dt );
var pa = new Array( "専務", "部長", "課長" );

if ( ( dd < 0 ) || ( dd > 30 ) ) return "";
if ( dd == 0 ) return "社長になりました";
return pa[Math.floor( ( dd - 1 ) / 10 )] + "になり" + ( 10 - dd % 10 ) % 10 + "日です。";
}
tontonpokopoko 2009/03/10 16:21:49

Mookさま、ありがとうございます。
正常に動作しています。
教えてもらったものを２つ、

「2009/3/＊まで＊日です。」「課長になり3日です。」

と並べる場合は、どうすればいいのでしょうか？
2つの関数を並べただけでは、上書きされてしまいます。

またArray()内に、
例えば50個もの要素を書くことをしてもいいのでしょうか？
( "専務", "部長", "課長" ・・・→　これが50続くという意味)

もちろん、dd > 30　この数字を任意に設定しなければならないと思うのですが。

よろしくお願いします。m(__)m
Mook 2009/03/10 22:25:51

function countdownMsg( dt ) {
var dd = diffDay( dt );
var mdt=new Date(dt);
// 始めの部分
var message = mdt.getFullYear() + '/' + ( mdt.getMonth() + 1 ) + '/' + mdt.getDate();
if ( dd == 0 ) return message + "です。社長になりました";
if ( dd > 0 ) { message += 'まで' + dd + '日です。'; } else { message += 'から' + Math.abs( dd ) + '日です。'; }

// 後の部分
var pa = new Array( "専務", "部長", "課長", "係長", "新入社員" );
if ( dd < -30 ) return message + Math.floor( dd / -30 ) + "ヶ月が経過しました。";
if ( ( dd < 0 ) || ( dd > ( pa.length * 10 ) ) ) return message;
return message + pa[Math.floor( ( dd - 1 ) / 10 )] + "になり" + ( 10 - dd % 10 ) % 10 + "日です。";
}

をご希望ですか？
tontonpokopoko 2009/03/11 20:46:42

Mookさま、早速のコメントをありがとうございます。
現在、動作確認とともに、参考書を片手にいろいろと試しています。
一旦ここに報告をさせていただきます。
今回は貴重なお時間を割いていただき、本当にありがとうございます。

後ほどまた連絡をさせていただきます。
tontonpokopoko 2009/03/12 04:30:45

Mookさま、
当方の求めていたものが作成できました。
いろいろと手助けしていただき、本当に感謝です。

最後にあと2つだけ、
①入力をドロップダウン式にしたい場合はどうなるのでしょう？
現状のMarsさまの「editMode」からのフォームを基本に考えています。

②表示された、"専務", "部長", "課長", "係長", "新入社員"　から、
リンクを張りたいときはどうするのでしょう？

例）
「課長」になり3日です。
の「課長」部分に<a href="課長ページ">
の「部長」部分に<a href="部長ページ">
と状況にあったページに移動するのが目的です。

長くなりましたが、どうぞよろしくお願いいたします。m(__)m
Mook 2009/03/13 00:17:20

対応した例です。
日付の範囲やリンク先はカスタマイズしてください。

※コメントはインデントができないので、スペースを全角にしています。
　下記のコードのスペースを半角スペースに変換して、実行してください。

<html>
<head>
<title>カウントダウンサンプル</title>
<script type="text/javascript">

</script>

</head>
<body onload=init();>
<form name="myForm">
<p id="date"></p>

<p>
<select id="countdownDate" name="ss" style="display:none" ></select>
</select>
<input type="button" id="countdownEdit" value="カウントダウン設定" onclick="editMode(this)">
</p>
</form>
</body>
</html>
tontonpokopoko 2009/03/13 16:45:25

ドロップダウンに変更するのに簡単な修正かなと思ったのですが、
大変なお時間を割いていただき、まことに申し訳ありません。
プログラムを書き直していただき恐縮です。

今回教えていただいた、さまざまなパターンの
javascriptの使い方は当方にとって大変参考になりました。
javascriptやAjaxに興味を持ち始め、
思案しているプログラムが山ほどあります。

今後もこちらで質問することがありますが、
少しずつ理解しながら勉強していきたいと思っています。
当方のスキル違いの質問に対し、
1つ1つ対応してもらったことに心から感謝いたします。

本当にお付き合い、ありがとうございました。
また是非、いろいろと教えていただければ幸いです。
よろしくお願いいたします。m(__)m

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

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

リクエスト送信済

回答リクエストを送信したユーザーはいません

Mook · Accepted Answer · 2009-03-08T21:54:04+09:00

Mars さんのコードをベースにしましたが、 countdownMsg の部分を下記に書き換えれば、

そのようになると思いますが、いかがでしょうか。

function countdownMsg(dt){
    var mdt=new Date(dt);
    var dfDay =  diffDay(dt);
    if ( dfDay == 0 ) {
         return "＜＜＜当日のメッセージ＞＞＞";
    }

    var message;
    if ( dfDay > 0 ) {
        message = mdt.getFullYear() + '/' + ( mdt.getMonth() + 1 ) + '/' + mdt.getDate() + 'まで' + dfDay + '日です。';
        if ( dfDay <= 10 ) {
            message += "もうすぐです。";
        } else if ( dfDay <= 30 ) {
            message += "近づいてきました。";
        }
    } else {
        message = mdt.getFullYear() + '/' + ( mdt.getMonth() + 1 ) + '/' + mdt.getDate() + 'から' + Math.abs( dfDay ) + '日です。';
        if ( dfDay <= -30 )
            message += Math.floor( dfDay / -30 ) + "ヶ月が経過しました。";
    }
    return message;
}

javascriptでカウントダウンを作っています。

ベストアンサー

Mook13143932009/03/08 21:54:04

コメント（8件)

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