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

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

●質問者: nashie0306
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● ゼニス!

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


2 ● a-kuma3
ベストアンサー

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

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

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

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

<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>

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


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

nashie0306さんのコメント
詳しく教えていただいて、助かりました。 ありがとうございます。

3 ● Lhankor_Mhy

この「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='【ここに日画像のパスを入れます】'>");

a-kuma3さんのコメント
そっか、空白を埋めた方が見通しが良いのか。 詰めたければ、幅が狭い画像を用意すれば良いのだし。

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

●質問をもっと探す●



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