javascript - 自动日历 php html

Question

看看我制作的这个日历:

http://jsfiddle.net/S93CM/

我每天手动做的，有办法让每个月都自动做，并实现当天吗？

示例代码:

<h1>June</h1>
  <table>
      <tr>
          <td class="availableDay">1</td>
          <td class="availableDay">2</td>
          <td class="availableDay">3</td>
          <td class="availableDay">4</td>
          <td class="availableDay">5</td>
          <td class="availableDay">6</td>
          <td class="availableDay">7</td>
       </tr>
 </table>

#calendar{
  width:225px;
  margin:0 auto;
  margin-top:-20px;
  margin-bottom:2%;
  border-radius:5px;
  font-family: "Code Light";
  text-align:center;
  color:#000000;
  margin-left: 10%;
}

#calendar h1{
  background:#0068BD;
  border-radius:5px 5px 0 0;
  padding:20px;
  font-size:140%;
  font-weight:300;
  text-transform:uppercase;
  letter-spacing:1px;
  color:#fff;
  cursor:default;
}

#calendar table{
  border-top:1px solid #ddd;
  border-left:1px solid #ddd;
  border-spacing:0;
  border-radius:0 0 5px 5px;
}

#calendar td{
  width:38px;
  height:38px;
  background:#eee;
  border-right:1px solid #ddd;
  border-bottom:1px solid #ddd;
  padding:6px;
  cursor:pointer;
  transition:background .3s;
  -webkit-transition:background .3s;
}

#calendar td:hover:not(.current){
  background:#ddd;
}

#calendar .lastmonth,#calendar .nextmonth,#calendar .nextmonth ~ *{
  background:#fff;
  color:#999;
}

#calendar .currentA{
  background:#CCCCCC;
  font-weight:700;
  color:#0077B9;
}

#calendar .currentO{
  background:#CCCCCC;
  font-weight:700;
  color:#900002;
}

#calendar .hastask{
  font-weight:700;
  color: #FF0000;
}
#calendar .availableDay{
	color: #0077B9;
}
#calendar .occupiedDay{
	background: #ED4337;
	color: #ffffff;
}

#calendar tr:last-of-type td:first-of-type{border-radius:0 0 0 5px;}
#calendar tr:last-of-type td:last-of-type{border-radius:0 0 5px 0;}

<div id="calendar">
    <h1>June</h1>
    <table>
        <tr>
            <td class="availableDay">1</td>
            <td class="availableDay">2</td>
            <td class="availableDay">3</td>
            <td class="availableDay">4</td>
            <td class="availableDay">5</td>
            <td class="availableDay">6</td>
            <td class="availableDay">7</td>
        </tr>
        <tr>
            <td class="availableDay">8</td>
            <td class="availableDay">9</td>
            <td class="currentA">10</td>
            <td class="availableDay">11</td>
            <td class="availableDay">12</td>
            <td class="availableDay">13</td>
            <td class="availableDay">14</td>
        </tr>
        <tr>
            <td class="availableDay">15</td>
            <td class="availableDay">16</td>
            <td class="availableDay">17</td>
            <td class="availableDay">18</td>
            <td class="availableDay">19</td>
            <td class="availableDay">20</td>
            <td class="availableDay">21</td>
        </tr>
        <tr>
            <td class="availableDay">22</td>
            <td class="availableDay">23</td>
            <td class="availableDay">24</td>
            <td class="availableDay">25</td>
            <td class="availableDay">26</td>
            <td class="availableDay">27</td>
            <td class="availableDay">28</td>
        </tr>
        <tr>
            <td class="availableDay">29</td>
            <td class="availableDay">30</td>
            <td class="nextmonth">1</td>
            <td class="nextmonth">2</td>
            <td class="nextmonth">3</td>
            <td class="nextmonth">4</td>
            <td class="nextmonth">5</td>
        </tr>
    </table>
</div>

Answer 1

使用纯 JS:

Live Demo

var months = "January,February,March,April,May,June,July,August,September,October,November,December".split(",");
window.onload=function() {
    var d = new Date();
    document.getElementById("calendar").getElementsByTagName("h1")[0].innerHTML=months[d.getMonth()];
    document.getElementsByTagName("td")[d.getDate()-1].className="currentA";
}

如果你想在万年历中显示禁用的 29/30/31 试试

var testDate = new Date(d.getFullYear(),d.getMonth()+1,0);
for (var i=30;i>=testDate.getDate();i--) { 
  document.getElementsByTagName("td")[i].className="disabled";
}

Live Demo