LightSpeedC score 24
2017/01/18 05:00 投稿
| つっこみどころ満載ですが、とりあえず無駄なコードを減らしてみて |
| ロジックを追えるようにして、修正してみました。 |
| 問題はタグの親子構造が完成していないのに |
| innerHTMLに直接文字列で加えていたので |
| 動かなかっただけです。 |
| 全部文字列でHTMLを作成してから |
| innerHTMLにセットすると良いです。 |
| HTMLは文字列で作成すると開きタグと閉じタグの対応がおかしくなりしやすいので、 |
| DOMの要素単位で作成して、親子関係を作るべきだと思います。 |
| ↓こちらの方の記事を見てとりあえず回答してみました。 |
| [カレンダー生成スクリプトを書いてみた - Qiita](http://qiita.com/ShibuyaKosuke/items/8c47ae51195ddc42ce67) |
| ↓Reactを使ってカレンダーを書いてみました。ご参考まで。 |
| [React v15でカレンダーを作ってみた - Qiita](http://qiita.com/LightSpeedC/items/8679c9d4069523b737ea) |
| ```html |
| <!DOCTYPE HTML> |
| <html lang="ja"> |
| <!-- https://teratail.com/questions/61908 --> |
| <!-- 参考 http://qiita.com/ShibuyaKosuke/items/8c47ae51195ddc42ce67 --> |
| <head> |
| <meta charset="UTF-8"> |
| <title></title> |
| <style type="text/css"> |
| html { font-family: 'ＭＳ Ｐゴシック'; font-size: 1.5em; } |
| td { text-align: center; } |
| .table_style { background-color: #ddffff; } |
| thead { background-color: #ccffcc; } |
| </style> |
| </head> |
| <body> |
| <div id="$calendar"></div> |
| <script type="text/javascript"> |
| //addEventlistener および attachEvent かを 判断(関数addListener)＝＝作成 |
| function addListener(element, event, listener) { |
| if (element.addEventListener) |
| element.addEventListener(event, listener, false); |
| else if (element.attachEvent) |
| element.attachEvent('on' + event, listener); |
| else |
| throw new Error('イベントリスナに未対応です。'); |
| }; |
| //上記 判断がら 関数を実行(div#calendar を 扱い其のelement から |
| //日付のDATAオブジェクトを 要素と絡めて カレンダーを 構築 |
| addListener(window, 'load', calendar_00); |
| //関数koyomi()＝＝カレンダーを LOAD時 に画面に出力 |
| function calendar_00() { |
| var currentmeantime = new Date(2017, 1, 1); |
| var year = currentmeantime.getFullYear(); |
| var month = currentmeantime.getMonth() + 1; |
| currentmeantime.setDate(1); |
| var monthDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; |
| var numOfMonth = monthDays[month - 1]; |
| var daysOfWeek = ['日', '月', '火', '水', '木', '金', '土']; |
| var column; |
| if (month == 2 && ((year % 4 == 0 && year % 100 != 0) || (year % 400 == 0))) |
| numOfMonth = 29; |
| var str = '<table class="table_style">'; |
| str += '<thead>'; |
| str += '<tr>'; |
| for (var i = 0; i <= 6; i++) |
| str += '<th>' + daysOfWeek[i] + '</th>'; |
| str += '</tr>'; |
| str += '</thead>'; |
| str += '<tbody>'; |
| str += '<tr>'; |
| for (column = 0; column < currentmeantime.getDay() ; column++) |
| str += '<td></td>'; |
| for (var i = 1; i <= numOfMonth; i++) { |
| str += '<td>' + i + '</td>'; |
| if (column == 6) { |
| str += '</tr>'; |
| column = 0; |
| if (!(i == numOfMonth)) |
| str += '<tr>'; |
| } else |
| column++; |
| } |
| str += '</tbody>'; |
| str += '</table>'; |
| $calendar.innerHTML = str; |
| }; |
| </script> |
| </body> |
| </html> |
| ``` |
LightSpeedC score 24
2017/01/14 15:22 投稿
| つっこみどころ満載ですが、とりあえず無駄なコードを減らしてみて |
| ロジックを追えるようにして、修正してみました。 |
| 問題はタグの親子構造が完成していないのに |
| innerHTMLに直接文字列で加えていたので |
| 動かなかっただけです。 |
| 全部文字列でHTMLを作成してから |
| innerHTMLにセットすると良いです。 |
| HTMLは文字列で作成すると開きタグと閉じタグの対応がおかしくなりしやすいので、 |
| DOMの要素単位で作成して、親子関係を作るべきだと思います。 |
| ↓こちらの方の記事を見てとりあえず回答してみました。 |
| [カレンダー生成スクリプトを書いてみた - Qiita](http://qiita.com/ShibuyaKosuke/items/8c47ae51195ddc42ce67) |
| ```html |
| <!DOCTYPE HTML> |
| <html lang='ja'> |
| <html lang="ja"> |
| <!-- https://teratail.com/questions/61908 --> |
| <!-- 参考 http://qiita.com/ShibuyaKosuke/items/8c47ae51195ddc42ce67 --> |
| <head> |
| <meta charset='UTF-8'> |
| <meta charset="UTF-8"> |
| <title></title> |
| <style type='text/css'> |
| <style type="text/css"> |
| html { font-family: 'ＭＳ Ｐゴシック'; font-size: 1.5em; } |
| td { text-align: center; } |
| .table_style { background-color: #ddffff; } |
| thead { background-color: #ccffcc; } |
| </style> |
| </head> |
| <body> |
| <div id="$calendar"></div> |
| <script type="text/javascript"> |
| //addEventlistener および attachEvent かを 判断(関数addListener)＝＝作成 |
| function addListener(element, event, listener) { |
| if (element.addEventListener) |
| element.addEventListener(event, listener, false); |
| else if (element.attachEvent) |
| element.attachEvent('on' + event, listener); |
| else |
| throw new Error('イベントリスナに未対応です。'); |
| }; |
| //上記 判断がら 関数を実行(div#calendar を 扱い其のelement から |
| //日付のDATAオブジェクトを 要素と絡めて カレンダーを 構築 |
| addListener(window, 'load', calendar_00); |
| //関数koyomi()＝＝カレンダーを LOAD時 に画面に出力 |
| function calendar_00() { |
| var currentmeantime = new Date(2017, 1, 1); |
| var year = currentmeantime.getFullYear(); |
| var month = currentmeantime.getMonth() + 1; |
| currentmeantime.setDate(1); |
| var monthDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; |
| var numOfMonth = monthDays[month - 1]; |
| var daysOfWeek = ['日', '月', '火', '水', '木', '金', '土']; |
| var column; |
| if (month == 2 && ((year % 4 == 0 && year % 100 != 0) || (year % 400 == 0))) |
| numOfMonth = 29; |
| var str = '<table class="table_style">'; |
| str += '<thead>'; |
| str += '<tr>'; |
| for (var i = 0; i <= 6; i++) |
| str += '<th>' + daysOfWeek[i] + '</th>'; |
| str += '</tr>'; |
| str += '</thead>'; |
| str += '<tbody>'; |
| str += '<tr>'; |
| for (column = 0; column < currentmeantime.getDay() ; column++) |
| str += '<td></td>'; |
| for (var i = 1; i <= numOfMonth; i++) { |
| str += '<td>' + i + '</td>'; |
| if (column == 6) { |
| str += '</tr>'; |
| column = 0; |
| if (!(i == numOfMonth)) |
| str += '<tr>'; |
| } else |
| column++; |
| } |
| str += '</tbody>'; |
| str += '</table>'; |
| $calendar.innerHTML = str; |
| }; |
| </script> |
| </body> |
| </html> |
| ``` |
