개발/HTML

Date 이벤트

고니킹 2014. 12. 26. 17:38
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="EUC-KR">
  5. <title>Insert title here</title>
  6. <script>
  7.     function fn_Date()
  8.     {
  9.         var form = document.forms['Date'];
  10.         var date = new Date();
  11.         form.Date1.value = date;
  12.     }
  13.    
  14.     function fn_Date2()
  15.     {
  16.         var form = document.forms['Date'];
  17.         var date = new Date(1987, 6, 5, 13, 00, 14);
  18.         form.Date2.value = date;
  19.     }
  20.    
  21.     function fn_getYear()
  22.     {
  23.         var form = document.forms['Date'];
  24.         var date = new Date();
  25.         var date2 = new Date();
  26.    
  27.         date.setFullYear(date.getFullYear());
  28.         date2.setFullYear(date.getFullYear()-3);
  29.        
  30.         form.GetYear1.value = date.getFullYear()+"년";
  31.         form.GetYear2.value = date2.getFullYear()+"년";
  32.     }
  33.    
  34.     function fn_getMonth()
  35.     {
  36.         var form = document.forms['Date'];
  37.         var date = new Date();
  38.         var date2 = new Date();
  39.    
  40.         date.setMonth(date.getMonth());
  41.         date2.setMonth(date.getMonth()-5);
  42.        
  43.         form.GetMonth1.value = (date.getMonth()+1)+"월";
  44.         form.GetMonth2.value = (date2.getMonth()+1)+"월";
  45.     }
  46.    
  47.     function fn_getDate()
  48.     {
  49.         var form = document.forms['Date'];
  50.        
  51.         var date = new Date();
  52.         var date2 = new Date();
  53.    
  54.         date.setDate(date.getDate());
  55.         date2.setDate(date.getDate()+3);
  56.        
  57.         form.GetDate1.value = date.getDate()+"일";
  58.         form.GetDate2.value = date2.getDate()+"일";
  59.     }
  60.    
  61.     function fn_toString()
  62.     {
  63.         var form = document.forms['Date'];
  64.        
  65.         var date = new Date();
  66.        
  67.         var output = '';
  68.        
  69.         output += 'toDateString       : ' + date.toDateString()       + '\n';
  70.         output += 'toGMTString        : ' + date.toGMTString()        + '\n';
  71.         output += 'toLocaleDateString : ' + date.toLocaleDateString() + '\n';
  72.         output += 'toLocaleString     : ' + date.toLocaleString()     + '\n';
  73.         output += 'toLocaleTimeString : ' + date.toLocaleTimeString() + '\n';
  74.         output += 'toString           : ' + date.toString()           + '\n';
  75.         output += 'toTimeString       : ' + date.toTimeString()       + '\n';
  76.         output += 'toUTCString        : ' + date.toUTCString()        + '\n';
  77.        
  78.         form.ToString1.value = output;
  79.     }
  80.  
  81. </script>
  82. </head>
  83. <body>
  84. <form name="Date">
  85.     <div align="center"><font size="20">Date</font></div><br><br>
  86.     <table border="1" align="center">
  87.         <tr>
  88.             <td> Date() </td>
  89.             <td> 현재 시간을 리턴한다.</td>
  90.             <td><input type="button" size="10" value="보기" onclick="fn_Date()"/></td>
  91.             <td colspan="2"><input type="text" size="50" id="Date1" value="현재 시간은"/></td>
  92.         </tr>
  93.         <tr>
  94.             <td> Date(?) : </td>
  95.             <td> 원하는 날짜,시간을 설정하여 리턴한다.</td>
  96.             <td><input type="button" size="10" value="보기" onclick="fn_Date2()"/></td>
  97.             <td colspan="2"><input type="text" size="50" id="Date2" value="내가 태어난 순간"/></td>
  98.         </tr>
  99.         <tr>
  100.             <td> getFullYear() : </td>
  101.             <td> 년을 구할 수 있다.</td>
  102.             <td><input type="button" size="10" value="보기" onclick="fn_getYear()"/></td>
  103.             <td><input type="text" size="23" id="GetYear1" value="현재 년도"/></td>
  104.             <td><input type="text" size="23" id="GetYear2" value="3년전"/></td>
  105.         </tr>
  106.         <tr>
  107.             <td> getMonth() : </td>
  108.             <td> 월을 구할 수 있다.</td>
  109.             <td><input type="button" size="10" value="보기" onclick="fn_getMonth()"/></td>
  110.             <td><input type="text" size="23" id="GetMonth1" value="현재 달"/></td>
  111.             <td><input type="text" size="23" id="GetMonth2" value="5개월전"/></td>
  112.         </tr>
  113.         <tr>
  114.             <td> getDate() : </td>
  115.             <td> 일을 구할 수 있다.</td>
  116.             <td><input type="button" size="10" value="보기" onclick="fn_getDate()"/></td>
  117.             <td><input type="text" size="23" id="GetDate1" value="현재 일"/></td>
  118.             <td><input type="text" size="23" id="GetDate2" value="3일 후"/></td>
  119.         </tr>
  120.         <tr>
  121.             <td> ???toString() : </td>
  122.             <td> 시간을 여러가지 방식으로 표현하여 리턴한다/</td>
  123.             <td><input type="button" size="10" value="보기" onclick="fn_toString()"/></td>
  124.             <td colspan="2"><textarea cols="75" rows="9" id="ToString1"></textarea></td>
  125.         </tr>
  126.     </table>
  127. </form>
  128. </body>
  129. </html>

     변경 전

     변경 후