【实用随记】js日历

#wrapper {
            width: 500px;
            height: 500px;
            margin: 0 auto;
            text-align: center;
          }
          table {
            margin: 0 auto;
            text-align: center;
            border-spacing: 10px 5px
          }
          td {
          text-align: center;
          }

<div id="wrapper">
          <form>
            <select name="year" id="year">
              <option value="2010">2010</option>
              <option value="2011">2011</option>
              <option value="2012">2012</option>
              <option value="2013">2013</option>
              <option value="2014">2014</option>
            </select>
            <select name="month" id="month">
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
              <option value="4">4</option>
              <option value="5">5</option>
              <option value="6">6</option>
              <option value="7">7</option>
              <option value="8">8</option>
              <option value="9">9</option>
              <option value="10">10</option>
              <option value="11">11</option>
              <option value="12">12</option>
            </select>
            <table>
              <tr>
                <th>一</th>
                <th>二</th>
                <th>三</th>
                <th>四</th>
                <th>五</th>
                <th>六</th>
                <th>日</th>
              </tr>
              <tr class="1">
                <td class="1"></td>
                <td class="2"></td>
                <td class="3"></td>
                <td class="4"></td>
                <td class="5"></td>
                <td class="6"></td>
                <td class="7"></td>
              </tr>
              <tr class="2">
                <td class="1"></td>
                <td class="2"></td>
                <td class="3"></td>
                <td class="4"></td>
                <td class="5"></td>
                <td class="6"></td>
                <td class="7"></td>
              </tr>
              <tr class="3">
                <td class="1"></td>
                <td class="2"></td>
                <td class="3"></td>
                <td class="4"></td>
                <td class="5"></td>
                <td class="6"></td>
                <td class="7"></td>
              </tr>
              <tr class="4">
                <td class="1"></td>
                <td class="2"></td>
                <td class="3"></td>
                <td class="4"></td>
                <td class="5"></td>
                <td class="6"></td>
                <td class="7"></td>
              </tr>
              <tr class="5">
                <td class="1"></td>
                <td class="2"></td>
                <td class="3"></td>
                <td class="4"></td>
                <td class="5"></td>
                <td class="6"></td>
                <td class="7"></td>
              </tr>
              <tr class="6">
                <td class="1"></td>
                <td class="2"></td>
                <td class="3"></td>
                <td class="4"></td>
                <td class="5"></td>
                <td class="6"></td>
                <td class="7"></td>
              </tr>

            </table>
          </form>
        </div>

 (function() {
        var year,month;
        year = $('#year').val();
        month = $('#month').val();
        //每个月有多少天
        function getDays(year,month){
           if(month==1 || month==3 || month==5 || month==7 || month==8 || month==10 || month==12){
              return 31;
           }else if(month==4 || month == 6 || month == 9 || month == 11){
              return 30;
           }else if(month==2){
              if (leapyear(year)){
                return 29;
              }else{
                return 28;
              }
           }
        }
        //是否闰年
        function leapyear(year){
          if(year%4==0 && year%100!==0){
            return true;
          }else if(year%400==0){
            return true;
          }
        }
        //当月第一天是周几
        function getDayofWeek(year,month){
          var date = new Date();
          date.setFullYear(year);
          date.setMonth(month-1);
          date.setDate(1);
          return date.getDay();
        }
        //写入table
        function writeDown(year,month){
          var day = 0;
              row = 1;
              days = getDays(year,month);
              dayofWeek = getDayofWeek(year,month);
          if (dayofWeek == 0) {
            dayofWeek = 7;
          }
          for(var i=0; i<6; i++){
            for( var j=1; j<=7;j++){
              if(j >= dayofWeek || row != 1){
                day++;
                if(day > days){
                  break;
                }
                $('.' + row + ' .' +j).text(day);
              }
            }
            row++;
          }
        }
        $('#year').change(function() {
          $('td').text("");
          year = $('#year').val();
          writeDown(year, month);
        });
        $('#month').change(function() {
          $('td').text("");
          month = $('#month').val();
          writeDown(year, month);
        });

        writeDown(year, month);










      })();