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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

3回答

2114閲覧

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

jo1jo2jo3

総合スコア45

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2020/04/21 20:42

前提・実現したいこと

表示したい画像例→    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表示できるのでしょうか 教えてください。 よろしくお願いします。 ここにより詳細な情報を記載してください。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kai0310

2020/04/21 21:08

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

2020/04/21 23:01

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

2020/04/22 06:49

①画像はでデスクトップのディレクトリに入っています。ファイル名 image その中にpng 画像が入っています。  na-01 score 37様の回答でいうと document.write('<img src="image/m' + month + '.png">'); } の image/  です。  ②デスクトップのimageファイルの中 ping画像があります png画像のプロバディー詳細をみますと フォルダーのパス(場所) c:\ユーザー\jo1jo\デスクトップ\image になっています。
guest

回答3

0

ベストアンサー

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

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

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

JavaScript

1const today = new Date(), 2 month = today.getMonth() + 1, 3 date = today.getDate(), 4 day = today.getDay(), 5 // ファイル名,Alt用の曜日データ() 6 dayList = ['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday'], 7 // 画像フォルダまでのディレクトリを指定(環境に合わせて変更してください) 8 imgDir = './'; 9 10// 日によって月と日が2桁になる場合もあるので1桁ずつ分解して配列にいれておく 11let array = [month, date, day].map(value => { 12 return value.toString().split(''); 13}); 14 15// 画像要素生成 → src,alt設定 → #imagesの中に画像を追加 16array.map((value1, index) => { 17 value1.map(value2 => { 18 let newImg = document.createElement('img'); 19 20 if (index === 2) { 21 newImg.src = `${imgDir}${dayList[day]}.png`; 22 newImg.alt = dayList[day]; 23 } else { 24 newImg.src = `${imgDir}${value2}.png`; 25 newImg.alt = value2; 26 } 27 document.getElementById('images').appendChild(newImg); 28 }) 29});

投稿2020/04/22 06:21

編集2020/04/22 06:31
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

jo1jo2jo3

2020/04/22 12:36

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

退会済みユーザー

2020/04/22 13:07

`text-align: center;` は親(ブロック要素)に指定すると、 子(インライン要素)が真ん中寄せになります。 貼っておいたデモと同じように書けば真ん中に寄るはずなんですが、、、 他にCSSが書いてあればその影響の可能性もありますけど、 CSSを下記に変えてみたらどうでしょう? #images { display: block; text-align: center} img { display: inline; margin: 10px }
jo1jo2jo3

2020/04/22 15:46

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

退会済みユーザー

2020/04/22 16:10 編集

CSSは解決できなかったようですが、 要件は解決したようで良かったです。 ベストアンサーありがとうございます。
guest

0

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

javascript

1 2<!DOCTYPE html> 3 <html lang="ja"> 4 <head> 5 <title>画像で日付表示</title> 6 </head> 7 <body> 8 <script type="text/javascript"> 9 10 //月画像の取得 11 function getMonthImg(month){ 12 13 document.write('<img src="image/m' + month + '.png">'); 14 } 15 16 //数字画像の取得 17 function getDateImg(date){ 18 var str = String(date); 19 for (var i in str) 20 { 21 document.write('<img src="image/' + str[i] + '.png">'); 22 } 23 } 24 25 //曜日画像の取得 26 function getDayImg(day){ 27 28 document.write('<img src="image/d' + day + '.png">'); 29 } 30 31 //現在時刻の取得 32 const dtNow = new Date(); 33 const dtMonth = dtNow.getMonth() + 1; 34 const dtDate = dtNow.getDate(); 35 const dtDay = dtNow.getDay(); 36 37 //画像生成処理 38 getMonthImg(dtMonth); 39 getDateImg(dtDate); 40 getDayImg(dtDay); 41 42 </script> 43 </body> 44 </html> 45

投稿2020/04/22 01:03

na-01

総合スコア99

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

jo1jo2jo3

2020/04/22 06:12

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

0

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

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

投稿2020/04/22 00:11

yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

jo1jo2jo3

2020/04/22 06:05

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問