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

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

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

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

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

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

回答の条件
  • 1人5回まで
  • 登録:2009/03/08 17:38:47
  • 終了:2009/03/09 18:05:48

ベストアンサー

id:Mook No.1

Mook回答回数1312ベストアンサー獲得回数3912009/03/08 21:54:04

ポイント100pt

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;
}
id:tontonpokopoko

Mookさま、的確なコードをありがとうございます。

動作確認もいたしましたがバッチリでした。

もし下の表示箇所に初期設定で文字を表示させる場合、

例えば

「YYYY/M/Dに半角数字を記入、例(2009/9/9)」

と、表示させたい場合はどうすればいいのでしょうか?

<input type="text" id="countdownDate" sie="10" style="display:none">

また参考までに、

追記表示に以下のようなプログラムを作りたいときには、どうなるのでしょう?

カウントダウン当日 社長になりました

~10日前 専務になり*日です。(10で割れずに余りだけを表示)

10日前 専務になり0日です。( dfDay / 10 )が1で、余りが0です)

10~20日前 部長になり*日です。 ( dfDay / 10 )が1で、余りを*日に表示。

20日前 部長になり0日です。( dfDay / 10 )が2で、余りが0です)

20~30日前 課長になり*日です。 ( dfDay / 10 )が2で、余りを*日に表示。

30日前 課長になり0日です。( dfDay / 10 )が3で、余りが0です)

0日が存在します。

便乗で質問ですが、よろしくお願いいたします。

2009/03/09 18:03:52
  • id:tontonpokopoko
    <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:Mook
    >「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 + "日です。";
    }

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

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

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

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

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

    よろしくお願いします。m(__)m
  • id:Mook
    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 + "日です。";
    }

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

    後ほどまた連絡をさせていただきます。
  • id:tontonpokopoko
    Mookさま、
    当方の求めていたものが作成できました。
    いろいろと手助けしていただき、本当に感謝です。

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

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

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

    長くなりましたが、どうぞよろしくお願いいたします。m(__)m
  • id:Mook
    対応した例です。
    日付の範囲やリンク先はカスタマイズしてください。

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

    <html>
    <head>
    <title>カウントダウンサンプル</title>
    <script type="text/javascript">
    <!--
    function init() {
      var dt = getCookie();
      if(dt) {
        document.getElementById('date').innerHTML = countdownMsg(dt);
      }
      setOption( 31, dt );
    }

    function setOption(num, sdt) {
      var dt = new Date();
      var baseSec = dt.getTime();
      var dd;
      var objSel = document.myForm.ss;
      for( var i=0 ; i<num ; i++ ){
        dt.setTime( baseSec + 86400000 * i );
        dd = dt.getFullYear() + "/" + (dt.getMonth() + 1) + "/" + dt.getDate();
        objSel.options[i] = new Option( dd, dd, "", "" );
        if ( sdt == dt ) onjSel.options[i].selected = true;
      }
      objSel.length=num;
    }

    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));
    }

    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( '<a href="http://www.google.co.jp">専務</a>', '部長', '課長', '係長', '新入社員' );
      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 + "日です。";
    }
    -->
    </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>
  • id:tontonpokopoko
    ドロップダウンに変更するのに簡単な修正かなと思ったのですが、
    大変なお時間を割いていただき、まことに申し訳ありません。
    プログラムを書き直していただき恐縮です。

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

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

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

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

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

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

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