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

前提・実現したいこと

表示したい画像例→　　　　４２２水　　日にち曜日を４個の画像で表示したいです。
画像のディレクトリ場所　　：デスクトップ　ファイル名　image　　　
画像の拡張子　　　　　　：png
月画像のファイル名　　　：m1.pngからm12.pngまで１２個　　　　　　
数字画像のファイル名　　：0.png～9.png 合計９個　組み合わせて１から３１表示したい
曜日画像のファイル名　　：d0.png（表示は日）からd6.png(表示は土）　合計７個

ここに質問の内容を詳しく書いてください。
ネットで調べて色々なソースコード試しましたが
うまく表示できません。
日付　曜日を取得して　画像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>  <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表示できるのでしょうか
教えてください。
よろしくお願いします。

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

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 になっています。

行動規範の内容に同意します

回答3件

ベストアンサー

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

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

↓動作確認用にデモ画像で試してみました。
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

回答ありがとうございます。希望通り　４２２水　と表示されました。ありがとうございます。あと少しで完成です。ｃｓｓ　センターよせが実行されません。現在の表示４２２水 #images { text-align: center; } img { margin: 10px; } となっており　ｃｓｓがきいていないです。ｃｓｓを実行するにはどうすればよいのでしょうか＜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は解決できなかったようですが、要件は解決したようで良かったです。ベストアンサーありがとうございます。

行動規範の内容に同意します

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

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

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

行動規範の内容に同意します

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

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

投稿2020/04/22 00:11

yambejp

総合スコア116724

jo1jo2jo3

2020/04/22 06:05

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

行動規範の内容に同意します

あなたの回答