teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問日替わりカレンダーを画像pngで表示させたいです

編集履歴

質問編集履歴

2

コードを・・・で囲みました

2020/04/25 07:38

投稿

jo1jo2jo3
jo1jo2jo3

スコア45

test CHANGED
File without changes
test CHANGED
@@ -60,11 +60,7 @@
60
60
 
61
61
 
62
62
 
63
- ③エラーがでるソースコード
63
+ ③エラーがでるソース
64
-
65
-
66
-
67
- ```ここに言語を入力　jabasukuript
68
64
 
69
65
  コード
70
66
 
@@ -72,118 +68,124 @@
72
68
 
73
69
  <html lang="ja">
74
70
 
75
- <head>
76
-
77
- <meta charset="utf-8">
78
-
79
- <title>日付を画像表示</title>
80
-
81
- </head>
82
-
83
- <body>
84
-
85
- <div id="images"></div>
86
-
87
- <div id="images2"></div>
88
-
89
- <script type="text/javascript">
90
-
91
- <!--
92
-
93
- const today = new Date()
94
-
95
- , month = today.getMonth()
96
-
97
- , date = today.getDate()
98
-
99
- , day = today.getDay()
100
-
101
- , // ファイル名,Alt用の曜日データ（）
102
-
103
- dayList = ['d0', 'd1', 'd2', 'd3', 'd4', 'd5', 'd6']
104
-
105
- , // ファイル名,Alt用の月データ（）
106
-
107
- monthList = ['m1', 'm2', 'm3', 'm4', 'm5', 'm6', 'm7', 'm8', 'm9', 'm10', 'm11', 'm12']
108
-
109
- , // 画像フォルダまでのディレクトリを指定（デスクトップに作成　ファイル名　imege です）
110
-
111
- imgDir = './';
112
-
113
- // 月・曜日の変換
114
-
115
- const monthName = monthList[month];
116
-
117
- const dayName = dayList[day];
118
-
119
- // 日の分割
120
-
121
- const dateArray = (date < 10)
122
-
123
- ? ['0' , date.toString()] // 10未満の場合、先に'0'をつける
124
-
125
- : date.toString().split(''); // 10以上の場合、splitで分割する
126
-
127
- // 個別に処理
128
-
129
- // array = [ m, d0, d1, D ] の形
130
-
131
- const array = [ monthName, dateArray, dayName ].flat();
132
-
133
- // flat()したので、mapの入れ子がなくなった
134
-
135
- const imageObjectArray = array.map(value1=>{
136
-
137
- const newImg = document.createElement('img');
138
-
139
- //先に変換しておいたので、分岐がなくなった。
140
-
141
- newImg.src = '${imgDir}${value1}.png';
142
-
143
- newImg.alt = value1;
144
-
145
- return newImg;
146
-
147
- });
148
-
149
- imageObjectArray.map(object => {
150
-
151
- document.getElementById('images').appendChild(object);
152
-
153
- });
154
-
155
- // メソッドチェーンで処理（上と同じ処理をする）
156
-
157
- [ monthName, dateArray, dayName ]
158
-
159
- .flat()
160
-
161
- .map( name => {
162
-
163
- const newImg = document.createElement('img');
164
-
165
- newImg.src = '${imgDir}${name}.png';
166
-
167
- newImg.alt = name;
168
-
169
- return newImg;
170
-
171
- })
172
-
173
- .map(object => {
174
-
175
- document.getElementById('images2').appendChild(object)
176
-
177
- });
178
-
179
- //-->
180
-
181
- </script>
182
-
183
- </body>
71
+ <head>
72
+
73
+ <meta charset="utf-8">
74
+
75
+ <title>日付を画像表示</title>
76
+
77
+ </head>
78
+
79
+ <body>
80
+
81
+ <div id="images"></div>
82
+
83
+ <div id="images2"></div>
84
+
85
+ <script type="text/javascript">
86
+
87
+ <!--
88
+
89
+ const today = new Date()
90
+
91
+ , month = today.getMonth()
92
+
93
+ , date = today.getDate()
94
+
95
+ , day = today.getDay()
96
+
97
+ , // ファイル名,Alt用の曜日データ（）
98
+
99
+ dayList = ['d0', 'd1', 'd2', 'd3', 'd4', 'd5', 'd6']
100
+
101
+ , // ファイル名,Alt用の月データ（）
102
+
103
+ monthList = ['m1', 'm2', 'm3', 'm4', 'm5', 'm6', 'm7', 'm8', 'm9', 'm10', 'm11', 'm12']
104
+
105
+ , // 画像フォルダまでのディレクトリを指定（デスクトップに作成　ファイル名　imege です）
106
+
107
+ imgDir = './';
108
+
109
+ // 月・曜日の変換
110
+
111
+ const monthName = monthList[month];
112
+
113
+ const dayName = dayList[day];
114
+
115
+ // 日の分割
116
+
117
+ const dateArray = (date < 10)
118
+
119
+ ? ['0' , date.toString()] // 10未満の場合、先に'0'をつける
120
+
121
+ : date.toString().split(''); // 10以上の場合、splitで分割する
122
+
123
+ // 個別に処理
124
+
125
+ // array = [ m, d0, d1, D ] の形
126
+
127
+ const array = [ monthName, dateArray, dayName ].flat();
128
+
129
+ // flat()したので、mapの入れ子がなくなった
130
+
131
+ const imageObjectArray = array.map(value1=>{
132
+
133
+ const newImg = document.createElement('img');
134
+
135
+ //先に変換しておいたので、分岐がなくなった。
136
+
137
+ newImg.src = '${imgDir}${value1}.png';
138
+
139
+ newImg.alt = value1;
140
+
141
+ return newImg;
142
+
143
+ });
144
+
145
+ imageObjectArray.map(object => {
146
+
147
+ document.getElementById('images').appendChild(object);
148
+
149
+ });
150
+
151
+ // メソッドチェーンで処理（上と同じ処理をする）
152
+
153
+ [ monthName, dateArray, dayName ]
154
+
155
+ .flat()
156
+
157
+ .map( name => {
158
+
159
+ const newImg = document.createElement('img');
160
+
161
+ newImg.src = '${imgDir}${name}.png';
162
+
163
+ newImg.alt = name;
164
+
165
+ return newImg;
166
+
167
+ })
168
+
169
+ .map(object => {
170
+
171
+ document.getElementById('images2').appendChild(object)
172
+
173
+ });
174
+
175
+ //-->
176
+
177
+ </script>
178
+
179
+ </body>
184
180
 
185
181
  </html>
186
182
 
183
+ コード
184
+
185
+ ```
186
+
187
+
188
+
187
189
 
188
190
 
189
191
  ④同じ表現になりますがエラーが出ないソースコード
@@ -198,7 +200,7 @@
198
200
 
199
201
 
200
202
 
201
- <!DOCTYPE html>
203
+ ```<!DOCTYPE html>
202
204
 
203
205
  <html lang="ja">
204
206
 
@@ -276,6 +278,14 @@
276
278
 
277
279
 
278
280
 
281
+ コード
282
+
283
+ ```
284
+
285
+
286
+
287
+
288
+
279
289
 
280
290
 
281
291
  よろしくお願いいます。

1

エラーメッセ修正

2020/04/25 07:38

投稿

jo1jo2jo3
jo1jo2jo3

スコア45

test CHANGED
File without changes
test CHANGED
@@ -44,11 +44,19 @@
44
44
 
45
45
 
46
46
 
47
-
47
+ 
48
48
 
49
49
  $%7BimgDir%7D$%7Bvalue1%7D.png:1 Failed to load resource: net::ERR_FILE_NOT_FOUND
50
50
 
51
- $%7BimgDir%7D$%7Bname%7D.png:1 Failed to load resource: net::ERR_FILE_NO![イメージ説明](26c97108fde64c86ef695dca87bb1fff.png)D
51
+ $%7BimgDir%7D$%7Bname%7D.png:1 Failed to load resource: net::ERR_FILE_NOT_FOUND
52
+
53
+ 
54
+
55
+ ​
56
+
57
+
58
+
59
+
52
60
 
53
61
 
54
62