質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.93%

JavaScript 日付と曜日を取得して用意した画像で表示したいです

解決済

回答 3

投稿

  • 評価
  • クリップ 0
  • VIEW 531

score 40

前提・実現したいこと

表示したい画像例→    422水  日にち曜日を4個の画像で表示したいです。
画像のディレクトリ場所   :デスクトップ ファイル名 image   
画像の拡張子      :png
月画像のファイル名   :m1.pngからm12.pngまで12個      
数字画像のファイル名  :0.png~9.png 合計9個 組み合わせて1から31表示したい
曜日画像のファイル名  :d0.png(表示は日)からd6.png(表示は土) 合計7個

ここに質問の内容を詳しく書いてください。
ネットで調べて色々なソースコード試しましたが
うまく表示できません。
日付 曜日を取得して 画像png表示させるにはどうしたら
良いでしょうか。

発生している問題・エラーメッセージ

うごかないです。
日付を取得して日めくりカレンダーのような
表示をしたいです。
用意した数字と曜日の画像png画像で表示したい

エラーメッセージ

2.png:1 Failed to load resource: net::ERR_FILE_NOT_FOUND
3.png:1 Failed to load resource: net::ERR_FILE_NOT_FOUND
4.png:1 Failed to load resource: net::ERR_FILE_NOT_FOUND
.png:1 Failed to load resource: net::ERR_FILE_NOT_FOUND

該当のソースコード

JavaScriptここに言語名を入力JavaScript
ソースコード
<!DOCTYPE html>
<html lang="ja">
<head>
<title>画像で日付表示</title>
</head>
<body>

<!--
表示したい画像例→    422水  日にち曜日を4個の画像で表示したい
画像のディレクトリ場所   :デスクトップ ファイル名 image   
画像の拡張子      :png
月画像のファイル名   :m1.pngからm12.pngまで12個      
数字画像のファイル名  :0.png~9.png 合計9個 組み合わせて1から31表示したい
曜日画像のファイル名  :d0.png(表示は日)からd6.png(表示は土) 合計7個
-->

<script type="text/javascript">
<!--

var str = String(1234);// 一度文字列へ
for (var i in str)
{
document.write('<img src="' + str[i] + '.png">');// i番目の文字
}

function str2img(str, img)
{
var imgs = '';
for (var i in str)
{
imgs += img.replace('%s', str[i]);
}
return imgs;
}

// 使用例
document.write(str2img('123', '<img src="image/.png">'));
</script>
</body>
</html>

```

試したこと

ソースの書き換えを何度かしましたがうまく表示されないです

ここに問題に対して試したことを記載してください。

補足情報(FW/ツールのバージョンなど)

どのよにすれば日付取得して画像png表示できるのでしょうか
教えてください。
よろしくお願いします。

ここにより詳細な情報を記載してください。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kai0310

    2020/04/22 06:08

    コードを提示する場合はMarkDown記法をしようしてください。

    キャンセル

  • m.ts10806

    2020/04/22 08:01

    htmlから見て画像はどこに置いてあるのでしょうか。ほぼその点のみに見えます。

    キャンセル

  • jo1jo2jo3

    2020/04/22 15:49

    ①画像はでデスクトップのディレクトリに入っています。ファイル名 image その中にpng 画像が入っています。 
    na-01 score 37様の回答でいうと
    document.write('<img src="image/m' + month + '.png">');
    }
    の image/  です。 

    ②デスクトップのimageファイルの中 ping画像があります
    png画像のプロバディー詳細をみますと
    フォルダーのパス(場所) c:\ユーザー\jo1jo\デスクトップ\image
    になっています。

    キャンセル

回答 3

checkベストアンサー

+1

細かい要件とは違っているかもしれませんが、
タイトルの内容だけで作ると、下記の様な感じでできるかなと思います。

月と日は同じ数字でもそれぞれ異なる画像を表示させたいようですが、
具体的な素材がわからないので、スルーしてます。
そこも下記から手を加えれば可能です。

↓動作確認用にデモ画像で試してみました。
https://codepen.io/lisa1111/pen/gOaLjVy

const today = new Date(),
    month = today.getMonth() + 1,
    date = today.getDate(),
    day = today.getDay(),
    // ファイル名,Alt用の曜日データ()
    dayList = ['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday'],
    // 画像フォルダまでのディレクトリを指定(環境に合わせて変更してください)
    imgDir = './';

// 日によって月と日が2桁になる場合もあるので1桁ずつ分解して配列にいれておく
let array = [month, date, day].map(value => {
    return value.toString().split('');
});

// 画像要素生成 → src,alt設定 → #imagesの中に画像を追加
array.map((value1, index) => {
    value1.map(value2 => {
        let newImg = document.createElement('img');

        if (index === 2) {
            newImg.src = `${imgDir}${dayList[day]}.png`;
            newImg.alt = dayList[day];
        } else {
            newImg.src = `${imgDir}${value2}.png`;
            newImg.alt = value2;
        }
        document.getElementById('images').appendChild(newImg);
    })
});

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/04/22 21:36

    回答ありがとうございます。希望通り 422水 と表示されました。ありがとうございます。
    あと少しで完成です。
    css センターよせが実行されません。
    現在の表示
    422水
    #images { text-align: center; } img { margin: 10px; }
    となっており cssがきいていないです。
    cssを実行するにはどうすればよいのでしょうか<P>タグつけたりしましたがうまくいきません。
    よろしくお願いします。

    キャンセル

  • 2020/04/22 22:07

    `text-align: center;` は親(ブロック要素)に指定すると、
    子(インライン要素)が真ん中寄せになります。

    貼っておいたデモと同じように書けば真ん中に寄るはずなんですが、、、
    他にCSSが書いてあればその影響の可能性もありますけど、
    CSSを下記に変えてみたらどうでしょう?

    #images { display: block; text-align: center}
    img { display: inline; margin: 10px }

    キャンセル

  • 2020/04/23 00:46

    連絡ありがとうございました。
    出来なかったのでCSSは省きました。LishさんのCODEPEN画面では中央になっているのでこちらの何がおかしいかわかりませんが調べてみます。もともとプラス要素でセンター寄せだったので本件は完了しました。
    本当にありがとうございました。
    ベストアンサーにさせて頂きます。

    キャンセル

  • 2020/04/23 01:09 編集

    CSSは解決できなかったようですが、
    要件は解決したようで良かったです。

    ベストアンサーありがとうございます。

    キャンセル

+1

  • createElementでimgタグをつくるか
  • すでにあるimgをquerySelectorでつかんで

srcを指定すれば良いでしょう

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/04/22 15:05

    回答ありがとうございます。
    まだ勉強してから1カ月の初心者の為、わかりませんので
    ①②について
    ソースコードおしえてください。
    ①createElementでimgタグをつくる方法
    ②すでにあるimgをquerySelectorでつかんでsrcを指定方法
    甘えすぎで申し訳ございませんがよろしくお願いします。

    キャンセル

+1

恐らく画像のパス・ファイル名の指定が違うのではないでしょうか。
かなりざっくりですが、こんな感じでどうでしょうか。

<!DOCTYPE html>
    <html lang="ja">
        <head>
            <title>画像で日付表示</title>
        </head>
        <body>
        <script type="text/javascript">

        //月画像の取得
        function getMonthImg(month){

            document.write('<img src="image/m' + month + '.png">');
        }

        //数字画像の取得
        function getDateImg(date){
            var str = String(date);
            for (var i in str)
            {
                document.write('<img src="image/' + str[i] + '.png">');
            }
        }

        //曜日画像の取得
        function getDayImg(day){

            document.write('<img src="image/d' + day + '.png">');    
        }

        //現在時刻の取得
        const dtNow = new Date();
        const dtMonth = dtNow.getMonth() + 1;
        const dtDate = dtNow.getDate();
        const dtDay = dtNow.getDay();

        //画像生成処理
        getMonthImg(dtMonth);
        getDateImg(dtDate);
        getDayImg(dtDay);

        </script>
        </body>
    </html>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/04/22 15:12

    ご連絡ありがとうございます。
    初心者の為、丁寧なコード記//コメント解説入力 嬉しいです。
    入力してみました。
    画面に4個表示アイコンのような表示でますが、エラーFailed to load resource: net::ERR_FILE_NOT_FOUND
    とでる為、調べてみます。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.93%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る