js動態生成日曆(完美註釋!)

//onload= function(){
var data=new Date();//獲取時間對象
var year=data.getFullYear();//當前年份
var moth=data.getMonth();//當前月份
var nday=data.getDate();//

//calendar(year,moth,nday,nlstr);
function front(){   //下一個月
    if(moth<=0){
    moth=11;
    year=year-1;
  }else{
    moth--;
  } 

  calendar(year,moth,nday);
}
function queen(){  //上一個月
     if(moth>=11){
    moth=0;
    year=year+1;
  }else{
     moth++;
  }
  calendar(year,moth,nday);
}
function is_leap(year) {  //判斷是否爲閏年
   return (year%100==0?res=(year%400==0?1:0):res=(year%4==0?1:0));
}
function calendar(year,moth,nday){  //顯示日期函數
    var nlstr = new Date(year,moth,1);//獲取每個月的第一天 nlstr.getday()每個月第一天是周幾
    var day=new Array("週日","週一","週二","週三","週四","週五","週六");//固定每週
    var time=document.getElementById('time');
    var calendar=document.getElementById('calendar');
    time.innerHTML=' ';   //每次調用清空div內容
    calendar.innerHTML=' ';
    //月的天數數組,days[moth] 就能夠調用某一年某一月的天數
    var days=new Array(31,28+is_leap(year),31,30,31,31,30,31,30,31,30,31);
    time.innerHTML="時間:"+ year+"-"+(moth+1)+"-"+nday// 顯示時間
    for(var i=0;i<day.length;i++){
        
        var my=document.createElement("div"); 
        calendar.appendChild(my);  //在calendar div中添加上面建立的div
        div(my);   //設置div樣式
        my.innerHTML=day[i];//value 爲星期
    }
    
    
    for(var i=0;i<nlstr.getDay();i++){ //每個月的第一天是星期幾
        var my=document.createElement("div")
        calendar.appendChild(my);
            div(my);
            my.innerHTML=' ';   //value 爲空
            my.style.background='#C0C0C0'//改變背景顏色
    }
    for(var i=0;i<days[moth];i++){   //日曆天數的顯示
        
        var my=document.createElement("div")
        calendar.appendChild(my);
        
        div(my);
        my.innerHTML=i+1; // value 爲天數一、二、3...
        //判斷當天日期改變背景顏色
        if(my.innerHTML==data.getDate()&&year==data.getFullYear()&&moth==data.getMonth())
        my.style.background='red';
    }
}
function div(my){   //每個div樣式
    my.style.margin='16px';
    my.style.fontSize='20px';
    my.style.textAlign='center'
    my.style.border='1px solid #000000';
    my.style.width='50px';
    my.style.height='40px';
    my.style.float="left"
}
//}

下面是截圖  樣式和html已省略html

相關文章
相關標籤/搜索