日曆原理（轉）

時間 2019-11-11

標籤日曆原理简体版

原文原文鏈接

開始看了一下網上的日曆代碼，感受太複雜難理解。因而本身研究了一下，基本原理是取得某個月的總天數與第一天是星期幾，而後在42個格子內顯示出來。也就是7列X6行，因此大部分程序都是用兩個for循環出來。感受有點麻煩，我是用一個for循環出來。javascript

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    .td_xq{  
    text-align:center;  
    font-size:12px;  
    font-weight:bold;  
    }  
    .td_hao{  
        font-size:12px;  
        cursor:pointer;  
        width:20px;  
        height:20px;  
        text-align:center;  
    }  
  </style>
</head>
<body>
  
  <div id="scs_rl"></div>

  <script type="text/javascript">
    /*
      開始看了一下網上的日曆代碼，感受太複雜難理解。因而本身研究了一下，基本原理是取得某個月的總天數與第一天是星期幾，而後在42個格子內顯示出來。也就是7列X6行，因此大部分程序都是用兩個for循環出來。感受有點麻煩，我是用一個for循環出來。
      固然以上只是日曆的基本結構，而後咱們能夠在這基礎上添加一些農曆陰曆節目之類的，至於選擇年月就更簡單了。若是你瞭解了這些原理，那麼你就能夠向世人宣佈本身也能夠作萌萌的日曆插件了！
    */
  function fDrawCal(y,m) {  
    var temp_d = new Date(y,m-1,1);  
    var first_d = temp_d.getDay(); //返回本月1號是星期幾  
    temp_d = new Date(y, m, 0);  
    var all_d = temp_d.getDate();//返回本月共有多少天,同時避免複雜的判斷潤年不潤年  
    var html,i_d;  
    html=y+"年"+m+"月"+d_d+"日";  
    html+="<table border='1' cellpadding='0' cellspacing='1' bgcolor='#ffffff'><tr>"  
    html+="<td class='td_xq'>日</td>";  
    html+="<td class='td_xq'>一</td>";  
    html+="<td class='td_xq'>二</td>";  
    html+="<td class='td_xq'>三</td>";  
    html+="<td class='td_xq'>四</td>";  
    html+="<td class='td_xq'>五</td>";  
    html+="<td class='td_xq'>六</td></tr>";  
    html+="<tr>";  
    var week = 0;
    for(var i=1;i<=42;i++){  
      week++;
      if(first_d<i&&i<=(all_d+first_d)){  
          i_d=i-first_d;//顯示出幾號 
          html+="<td class='td_hao' onclick='show(this)'";  
          if (y==d_y&&m==d_m&&d_d==i_d){//日曆中爲當天  
              html+=" style='color:red'>"+i_d+"</td>";  
          }else{  
              html+=">"+i_d+"</td>";  
          }  
      }else{  
          html+="<td> </td>";  
      }  
      if(i%7==0&&i<42){  
          html+="</tr><tr>";
          week = 0;
      }  
    }  
    html+="</tr></table>";  
    document.getElementById("scs_rl").innerHTML=html;  
  }  
      
    //點擊函數  
    function show(obj){  
        var t=obj.innerHTML;  
        //點擊後獲取時間,若是日曆在月視圖中不做爲,若是在日視圖對應跳到對應的日期,若是是在周視圖視狀況判斷  
        alert(t);  
    }  
      
    var d_Date = new Date();            //系統時間對象  
    var d_y = d_Date.getFullYear();     //完整的年份,千萬不要使用getYear,firfox不支持  
    var d_m = d_Date.getMonth()+1;      //注意獲取的月份比實現的小1  
    var d_d = d_Date.getDate();  
    fDrawCal(d_y,d_m);
  </script>
</body>
</html>

　　然以上只是日曆的基本結構，而後咱們能夠在這基礎上添加一些農曆陰曆節目之類的，至於選擇年月就更簡單了。若是你瞭解了這些原理，那麼你就能夠向世人宣佈本身也能夠作萌萌的日曆插件了！css

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。