Created
April 3, 2016 14:19
-
-
Save YusukeHosonuma/ef29046622e433a925f86070d0135836 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <!-- <link rel="stylesheet" type="text/css" href="sample.css"> --> | |
| <script src="script.js"></script> | |
| </head> | |
| <body> | |
| <select id="week"> | |
| <option>week1</option> | |
| <option>week2</option> | |
| <option>week3</option> | |
| <option>week4</option> | |
| </select> | |
| <button type="button" id="change" onclick="javascript: alert('変更したよ！');">変更</button> | |
| <form id="form" onchange="console.log('test');"> | |
| <table class="cal"> | |
| <tr> | |
| <th>日曜</th> | |
| <th>月曜</th> | |
| <th>火曜</th> | |
| <th>水曜</th> | |
| <th>木曜</th> | |
| <th>金曜</th> | |
| <th>土曜</th> | |
| </tr> | |
| <tr> | |
| <td>平和な日曜日</td> | |
| <td>憂鬱な月曜日</td> | |
| <td>そして神は地上に舞い降り</td> | |
| <td>様々な仕様を作り上げた</td> | |
| <td>そして人々は仕様を実装し</td> | |
| <td>世界が記述された</td> | |
| <td>Brand new world.</td> | |
| </tr> | |
| <tr> | |
| <td>平和な日曜日</td> | |
| <td><input type="text" /></td> | |
| <td>そして神は地上に舞い降り</td> | |
| <td>様々な仕様を作り上げた</td> | |
| <td>そして人々は仕様を実装し</td> | |
| <td>世界が記述された</td> | |
| <td>Brand new world.</td> | |
| </tr> | |
| </table> | |
| </form> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (function(callback){ | |
| window.addEventListener('DOMContentLoaded', callback); | |
| })(function() { | |
| // functions | |
| var $id = function(id) { return document.getElementById(id); } | |
| var $cls = function(className) { return document.getElementsByClassName(className); } | |
| // var $id = document.getElementById; // why not work? | |
| var $tag = function(target, tag) { return target.getElementsByTagName(tag); } | |
| // settings | |
| var colorSunday = '#fee'; | |
| var colorSaturday = '#eef'; | |
| // style calender. | |
| var table = $cls('cal')[0]; | |
| var rows = $tag(table, 'tr'); | |
| for (var i = 0; i < rows.length; i++) { | |
| var row = rows[i]; | |
| var ths = $tag(row, 'th'); | |
| if (ths.length != 0) { | |
| ths[0].style.backgroundColor = colorSunday; | |
| ths[ths.length - 1].style.backgroundColor = colorSaturday; | |
| } | |
| var tds = $tag(row, 'td'); | |
| if (tds.length != 0) { | |
| tds[0].style.backgroundColor = colorSunday; | |
| tds[tds.length - 1].style.backgroundColor = colorSaturday; | |
| } | |
| } | |
| // fire if week changed. | |
| var select = $id('week'); | |
| var changeButton = $id('change'); | |
| select.addEventListener('change', function() { | |
| changeButton.click(); | |
| }); | |
| // show notification, when form input changed. | |
| var form = $id('form'); | |
| form.addEventListener('change', function() { | |
| var div = document.createElement('div'); | |
| div.style.backgroundColor = '#efe'; | |
| div.textContent = '内容は変更されていますマイケル。保存するのをお忘れなく。（KITT）'; | |
| form.insertBefore(div, form.firstChild); | |
| }); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment