QA@IT

javascriptで、誕生日が来たら年齢を自動更新で表示させる方法

5574 PV

a)メッセージ:""歳の誕生日おめでとう!
b)メッセージ:

""の中に誕生日(=2017年1月20日で"10歳"になるとします)が来たら、
その人の年齢が毎年自動で表示され(a)、翌日から次の誕生日までは、
何も表示されない(b),ようにjavascriptで組み立てるには、
どうすればいいでしょうか。ご教示ください。

回答

jquery使用してますが、こんなんじゃダメ?

<head>
    <title></title>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.css" type="text/css" rel="Stylesheet" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>

    <script type='text/javascript'>

        $(document).ready(function () {
            var birthday = new Date(2007, 0, 17);   //誕生日(Monthは0起点)

            if ((new Date().getMonth() == birthday.getMonth()) && (new Date().getDate() == birthday.getDate())) {
                var age = new Date().getYear()- birthday.getYear()
                $('#message').text(age + "歳の誕生日おめでとう!!");
            }

        });

    </script>

</head>
<body>
    <p id='message'></p>
</body>
編集 履歴 (0)
  • 回答をありがとうございました。
    うまくいきましたが、個々の文字にスタイルを設定してみたくなり、<body>~</body>を消して、"$('#message').text"を"document.write"に変えてみました。そしてソースの表示を出してみましたが、全体が表示されなくなりました。個々の文字に、スタイルは設定できるのでしょうか。
    -

回答を参考にして、以下のようにjavascriptで個々の文字にスタイルを設定できました。

<script type='text/javascript'>

  var birthday = new Date(2007, 0, 19);   //誕生日(Monthは0起点)

  if ((new Date().getMonth() == birthday.getMonth()) && (new Date().getDate() == birthday.getDate())) {
          var age = new Date().getYear()- birthday.getYear();
              document.write("<p>");
              document.write("<span style='font-size : 25; color : red; font-weight:bold'>");
              document.write(age);
              document.write("</span>");
              document.write("歳の誕生日おめでとう<b>!!</b>");
              document.write("</p>");
            }

 </script>
編集 履歴 (1)
ウォッチ

この質問への回答やコメントをメールでお知らせします。