javascriptについて質問します。

javascriptを使って、画像で今日の日付を表示させる方法を「うさのJavaScript講座 本日日付を画像で表示☆サンプル集1-69を追加しました」http://blog.usagi-js.com/archives/2006/09/post_1.htmlを参考に作りました。うまく出来たのですが、1月〜9月までが「01月」と先頭に0が入ってしまいます。この「0」を表示させない方法はあるのでしょうか?
また、「年」「月」「日」も画像で表示する方法はあるのでしょうか?
javascriptは初めてなので、わかりやすく教えていただけると助かります。

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2014/01/25 17:21:58
  • 終了:2014/01/26 12:20:47

ベストアンサー

id:a-kuma3 No.2

a-kuma3回答回数4624ベストアンサー獲得回数19592014/01/25 18:39:56

1月~9月までが「01月」と先頭に0が入ってしまいます。この「0」を表示させない方法はあるのでしょうか?
また、「年」「月」「日」も画像で表示する方法はあるのでしょうか?

それぞれ、画像を用意します。
数字が images/number/○○○.gif という感じのようなので、それぞれ以下のように用意したとします。
「年」── images/year.gif
「月」── images/month.gif
「日」── images/date.gif

んで、元のソースの形を残しつつ、

  • 月、日が 10 より小さかったら一桁で表示
  • 「年」「月」「日」を画像で表示

と変更してみたのが、こちら。

<script language="javascript">
<!--
//------------------------------------------------------------
//javascript by @うさ http://www.usagi-js.com/
//------------------------------------------------------------

    //変数宣言
    var dtToday = new Date;
    var strYear;
    var strMonth;
    var strDate;
    //0から9までの画像を用意してください。
    //画像のURLを宣言します。
    var strPicture = new Array("../images/number/orange0_on.gif",
        "../images/number/orange1_on.gif",
        "../images/number/orange2_on.gif",
        "../images/number/orange3_on.gif",
        "../images/number/orange4_on.gif",
        "../images/number/orange5_on.gif",
        "../images/number/orange6_on.gif",
        "../images/number/orange7_on.gif",
        "../images/number/orange8_on.gif",
        "../images/number/orange9_on.gif");

    //年月日を取得
    strYear = dtToday.getFullYear();
    strMonth = dtToday.getMonth() + 1;
    strDate = dtToday.getDate();

// ★ここをコメントにします(ゼロを消す)
//  //桁数を整理します
//  if (strMonth < 10)
//  {
//      strMonth = "0" + strMonth;
//  }
//  if (strDate < 10)
//  {
//      strDate = "0" + strDate;
//  }
// ★ここまで

    //数字に画像を当てるための準備です。
    var imgYear, imgMonth, imgDate;
    imgYear = strYear.toString();
    imgMonth = strMonth.toString();
    imgDate = strDate.toString();

    //ここから表示
// ★この三行を変更します
//  document.write("<img src='"+strPicture[imgYear.substring(0,1)]+"'>"+"<img src='"+strPicture[imgYear.substring(1,2)]+"'>"+"<img src='"+strPicture[imgYear.substring(2,3)]+"'>"+"<img src='"+strPicture[imgYear.substring(3,4)]+"'>"+"年<br>");
//  document.write("<img src='"+strPicture[imgMonth.substring(0,1)]+"'>"+"<img src='"+strPicture[imgMonth.substring(1,2)]+"'>"+"月");
//  document.write("<img src='"+strPicture[imgDate.substring(0,1)]+"'>"+"<img src='"+strPicture[imgDate.substring(1,2)]+"'>"+"日");
// ★ここから追加するコード
    // 「年」の表示
    document.write(
        "<img src='"+strPicture[imgYear.substring(0,1)]+"'>"+
        "<img src='"+strPicture[imgYear.substring(1,2)]+"'>"+
        "<img src='"+strPicture[imgYear.substring(2,3)]+"'>"+
        "<img src='"+strPicture[imgYear.substring(3,4)]+"'>"+
        "<img src='../images/year.gif'><br>");
    // 「月」の表示
    if (strMonth < 10) {
        document.write(
            "<img src='"+strPicture[imgMonth]+"'>");
    } else {
        document.write(
            "<img src='"+strPicture[imgMonth.substring(0,1)]+"'>"+
            "<img src='"+strPicture[imgMonth.substring(1,2)]+"'>");
    }
    document.write(
        "<img src='../images/month.gif'>");
    // 「日」の表示
    if (strDate < 10) {
        document.write(
            "<img src='"+strPicture[imgDate]+"'>");
    } else {
        document.write(
            "<img src='"+strPicture[imgDate.substring(0,1)]+"'>"+
            "<img src='"+strPicture[imgDate.substring(1,2)]+"'>");
    }
    document.write(
        "<img src='../images/date.gif'>");
// ★ここまで
//-->
</script>

変更したところに「★」をつけたコメントを入れてます。

id:net_surounin

文字位置が移動しても大丈夫なら、この方法でOKですね。最初のサンプルコードで、“0”をパディングして追加しているのですから、質問者はもう一度よく、ソースコードを確認された方が良いと思います。

2014/01/25 18:59:34
id:nashie0306

詳しく教えていただいて、助かりました。
ありがとうございます。

2014/01/26 12:24:44

その他の回答(2件)

id:zenisudesuyo No.1

ゼニス!回答回数2ベストアンサー獲得回数02014/01/25 17:51:41

これはバグではなく、これは普通の事ですね。
My電子時計も1桁の月と日は最初に0がつきます。
なので気にする人はあまりいないとおもいます。
だから01月01日というのは正しいのです。
『01月01日』というのに見慣れている人もいれば、質問者さんみたいに、『1月1日』というのに見慣れている人もいます。
だから見慣れない方を始めて見た方は『え?』って思うのです。
どっっちも見慣れている方が大半だとおもいます。

id:a-kuma3 No.2

a-kuma3回答回数4624ベストアンサー獲得回数19592014/01/25 18:39:56ここでベストアンサー

1月~9月までが「01月」と先頭に0が入ってしまいます。この「0」を表示させない方法はあるのでしょうか?
また、「年」「月」「日」も画像で表示する方法はあるのでしょうか?

それぞれ、画像を用意します。
数字が images/number/○○○.gif という感じのようなので、それぞれ以下のように用意したとします。
「年」── images/year.gif
「月」── images/month.gif
「日」── images/date.gif

んで、元のソースの形を残しつつ、

  • 月、日が 10 より小さかったら一桁で表示
  • 「年」「月」「日」を画像で表示

と変更してみたのが、こちら。

<script language="javascript">
<!--
//------------------------------------------------------------
//javascript by @うさ http://www.usagi-js.com/
//------------------------------------------------------------

    //変数宣言
    var dtToday = new Date;
    var strYear;
    var strMonth;
    var strDate;
    //0から9までの画像を用意してください。
    //画像のURLを宣言します。
    var strPicture = new Array("../images/number/orange0_on.gif",
        "../images/number/orange1_on.gif",
        "../images/number/orange2_on.gif",
        "../images/number/orange3_on.gif",
        "../images/number/orange4_on.gif",
        "../images/number/orange5_on.gif",
        "../images/number/orange6_on.gif",
        "../images/number/orange7_on.gif",
        "../images/number/orange8_on.gif",
        "../images/number/orange9_on.gif");

    //年月日を取得
    strYear = dtToday.getFullYear();
    strMonth = dtToday.getMonth() + 1;
    strDate = dtToday.getDate();

// ★ここをコメントにします(ゼロを消す)
//  //桁数を整理します
//  if (strMonth < 10)
//  {
//      strMonth = "0" + strMonth;
//  }
//  if (strDate < 10)
//  {
//      strDate = "0" + strDate;
//  }
// ★ここまで

    //数字に画像を当てるための準備です。
    var imgYear, imgMonth, imgDate;
    imgYear = strYear.toString();
    imgMonth = strMonth.toString();
    imgDate = strDate.toString();

    //ここから表示
// ★この三行を変更します
//  document.write("<img src='"+strPicture[imgYear.substring(0,1)]+"'>"+"<img src='"+strPicture[imgYear.substring(1,2)]+"'>"+"<img src='"+strPicture[imgYear.substring(2,3)]+"'>"+"<img src='"+strPicture[imgYear.substring(3,4)]+"'>"+"年<br>");
//  document.write("<img src='"+strPicture[imgMonth.substring(0,1)]+"'>"+"<img src='"+strPicture[imgMonth.substring(1,2)]+"'>"+"月");
//  document.write("<img src='"+strPicture[imgDate.substring(0,1)]+"'>"+"<img src='"+strPicture[imgDate.substring(1,2)]+"'>"+"日");
// ★ここから追加するコード
    // 「年」の表示
    document.write(
        "<img src='"+strPicture[imgYear.substring(0,1)]+"'>"+
        "<img src='"+strPicture[imgYear.substring(1,2)]+"'>"+
        "<img src='"+strPicture[imgYear.substring(2,3)]+"'>"+
        "<img src='"+strPicture[imgYear.substring(3,4)]+"'>"+
        "<img src='../images/year.gif'><br>");
    // 「月」の表示
    if (strMonth < 10) {
        document.write(
            "<img src='"+strPicture[imgMonth]+"'>");
    } else {
        document.write(
            "<img src='"+strPicture[imgMonth.substring(0,1)]+"'>"+
            "<img src='"+strPicture[imgMonth.substring(1,2)]+"'>");
    }
    document.write(
        "<img src='../images/month.gif'>");
    // 「日」の表示
    if (strDate < 10) {
        document.write(
            "<img src='"+strPicture[imgDate]+"'>");
    } else {
        document.write(
            "<img src='"+strPicture[imgDate.substring(0,1)]+"'>"+
            "<img src='"+strPicture[imgDate.substring(1,2)]+"'>");
    }
    document.write(
        "<img src='../images/date.gif'>");
// ★ここまで
//-->
</script>

変更したところに「★」をつけたコメントを入れてます。

id:net_surounin

文字位置が移動しても大丈夫なら、この方法でOKですね。最初のサンプルコードで、“0”をパディングして追加しているのですから、質問者はもう一度よく、ソースコードを確認された方が良いと思います。

2014/01/25 18:59:34
id:nashie0306

詳しく教えていただいて、助かりました。
ありがとうございます。

2014/01/26 12:24:44
id:Lhankor_Mhy No.3

Lhankor_Mhy回答回数779ベストアンサー獲得回数2312014/01/25 19:06:48

この「0」を表示させない方法はあるのでしょうか?

 こんな感じでいかがでしょう。
 ↓の3か所を変更。

	//画像のURLを宣言します。
	var strPicture = new Array("../images/number/orange0_on.gif",
		"../images/number/orange1_on.gif",
		"../images/number/orange2_on.gif",
		"../images/number/orange3_on.gif",
		"../images/number/orange4_on.gif",
		"../images/number/orange5_on.gif",
		"../images/number/orange6_on.gif",
		"../images/number/orange7_on.gif",
		"../images/number/orange8_on.gif",
		"../images/number/orange9_on.gif");
	strPicture[" "] = "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==";     //変更
	//桁数を整理します
	if (strMonth < 10)
	{
		strMonth = " " + strMonth;     //変更
	}
	if (strDate < 10)
	{
		strDate = " " + strDate;     //変更
	}

 

「年」「月」「日」も画像で表示する方法はあるのでしょうか?

 こんな感じです。

	//ここから表示
	document.write("<img src='"+strPicture[imgYear.substring(0,1)]+"'>"+"<img src='"+strPicture[imgYear.substring(1,2)]+"'>"+"<img src='"+strPicture[imgYear.substring(2,3)]+"'>"+"<img src='"+strPicture[imgYear.substring(3,4)]+"'>"+"<img src='【ここに年画像のパスを入れます】'><br>");
	document.write("<img src='"+strPicture[imgMonth.substring(0,1)]+"'>"+"<img src='"+strPicture[imgMonth.substring(1,2)]+"'>"+"<img src='【ここに月画像のパスを入れます】'>");
	document.write("<img src='"+strPicture[imgDate.substring(0,1)]+"'>"+"<img src='"+strPicture[imgDate.substring(1,2)]+"'>"+"<img src='【ここに日画像のパスを入れます】'>");
id:a-kuma3

そっか、空白を埋めた方が見通しが良いのか。
詰めたければ、幅が狭い画像を用意すれば良いのだし。

2014/01/25 19:51:56
id:Lhankor_Mhy

あまりよい書き方ではないと思うんですが、質問者がお詳しくないとのこと、変更箇所をなるべく少なくしようと思いまして。

2014/01/26 09:07:12

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

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

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

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