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 為天數1、2、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已省略

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM