DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> JavaScript制作簡單的日歷效果
JavaScript制作簡單的日歷效果
編輯:關於JavaScript     

本文實例為大家分享了

<!DOCTYPE html>
<html>
  <head>
    <meta charset="gb2312">
    <title></title>
  </head>
  <body>
    <script>
       
      document.write("<table>");
      document.write("<th colspan='7'>2016年3月</th>");
      document.write("<tr id='titleCss'>");
      document.write("<td>日</td>");
      document.write("<td>一</td>");
      document.write("<td>二</td>");
      document.write("<td>三</td>");
      document.write("<td>四</td>");
      document.write("<td>五</td>");
      document.write("<td>六</td>");
      document.write("</tr>");
      var num=1;
//     for(var i=0;i<5;i++){
//       document.write("<tr>");
//       
//       for(var j=0;j<7;j++){
//         if(i==0 && j<2) document.write("<td></td>");
//         else if(i==4 && j>=5) document.write("<td></td>");
//         else document.write("<td>" + num++ +"</td>");  
//       }
//       document.write("</tr>");
//     }
      document.write("<tr>");
      document.write("<td></td>");
      document.write("<td></td>");
      for(var i=3;i<=33;i++){
        document.write("<td>" + num++);
        if((i%7)==0) document.write("</td></tr><tr>");
        else document.write("</td>");
      }
      document.write("<td></td>");
      document.write("<td></td>");
      document.write("</tr>");
      document.write("</table>");
    </script>
  </body>
</html>

效果圖:

希望本文所述對大家學習javascript程序設計有所幫助。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved