JavaScript裡的Date 對象屬性及對象方法－－實現簡單的日曆

標籤：簡單的   n+1   定義   對象   asc   play   案例   src   led   

上網搜尋"js 日曆外掛程式"就會出來各種效果的功能豐富的日曆外掛程式,很多都可以下載源碼,然後根據各自的需求對源碼進行修改就可以直接用了.

 

但今天講的不是如何使用這些外掛程式,而是講如何?一個很簡單的只有當前這個月的日曆，具體效果如：

  ( 時間是 2017-7-27 )，下面展示一下實現的代碼:

 .wrap {       font-size: 0; } .weeks span {       display: inline-block;       font-size: 14px;       width: 47px;       height: 44px;       line-height: 44px;       border: 1px solid #EFEFEF;       text-align: center;  }  #dates span{      font-size: 14px;      display: inline-block;      width:47px;      height: 49px;      line-height: 49px;      text-align: center;      border: 1px solid #EFEFEF;  }  #dates span.today {      color: #00ADB5;  }            

<div class="wrap">    <div class="weeks">        <span>日</span>        <span>一</span>        <span>二</span>        <span>三</span>        <span>四</span>        <span>五</span>        <span>六</span>    </div>    <div id="dates">                    </div></div>

var moday=[ 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31 ]; // 寫出每月的總天數，把天數定義給一個數組var d=new Date();var month=d.getMonth()+1;      //當前的月份var days=d.getDate();          //當前月的號數var years=d.getFullYear();     //當前的年份var run=years%4;               // 2月份的天數必須得區分今年是不是閏年 if(run!=0){     moday[1]=28;//2月份的天數}else{     moday[1]=29;}var date=new Date();date.setDate(1);  //設定當前月的某一天。  日曆都是星期日在第一位，星期六在最後一位：var momatch=[0,1,2,3,4,5,6];//這個存的是當前月的一號前面有多少空位，周日沒有，周一一個以此類推var dangqian=momatch[date.getDay()];
var dates=document.getElementById("dates");for(i=1;i<=parseInt(dangqian);i++){    dates.innerHTML+=‘<span>‘+‘&nbsp;‘+‘</span>‘;}var preAll = parseInt(moday[month-1]+dangqian);  //當前月1號前面的空白個數+這個月總天數for(i=parseInt(dangqian+1);i<= preAll;i++){    if(i%7==1 && i!=1){        dates.innerHTML+=‘<br>‘;    //每七個是一行     }     if(i==(days+dangqian)){    //給今天添加類名,方便設定樣式  days是當前號數加上前面的空白天數就是i        dates.innerHTML+=‘<span class="today">‘+parseInt(i-dangqian)+‘</span>‘;     }else {        dates.innerHTML+=‘<span>‘+parseInt(i-dangqian)+‘</span>‘;     }}for(i=preAll;i< (parseInt(preAll/7)+1)*7 ;i++){    dates.innerHTML+=‘<span>‘+‘&nbsp;‘+‘</span>‘;   //補全表格的空餘部分}

直接看上面實現的代碼應該不難理解該日曆實現的原理,如果不能理解的話,我們一起來學習下JavaScript裡面對時間日期的相關屬性和方法.

上面的代碼用到的方法在下面都有說明，而且很清晰哦！

Date 對象屬性

屬性	描述
constructor	返回對建立此對象的 Date 函數的引用。
prototype	使您有能力向對象添加屬性和方法。

    Date 對象方法

方法	描述
Date()	返回當日的日期和時間。
getDate()	從 Date 對象返回一個月中的某一天 (1 ~ 31)。
getDay()	從 Date 對象返回一周中的某一天 (0 ~ 6)。
getMonth()	從 Date 對象返回月份 (0 ~ 11)。
getFullYear()	從 Date 對象以四位元字返回年份。
getYear()	請使用 getFullYear() 方法代替。
getHours()	返回 Date 對象的小時 (0 ~ 23)。
getMinutes()	返回 Date 對象的分鐘 (0 ~ 59)。
getSeconds()	返回 Date 對象的秒數 (0 ~ 59)。
getMilliseconds()	返回 Date 對象的毫秒(0 ~ 999)。
getTime()	返回 1970 年 1 月 1 日至今的毫秒數。
getTimezoneOffset()	返回本地時間與格林威治標準時間 (GMT) 的分鐘差。
getUTCDate()	根據世界時從 Date 對象返回月中的一天 (1 ~ 31)。
getUTCDay()	根據世界時從 Date 對象返回周中的一天 (0 ~ 6)。
getUTCMonth()	根據世界時從 Date 對象返回月份 (0 ~ 11)。
getUTCFullYear()	根據世界時從 Date 對象返回四位元的年份。
getUTCHours()	根據世界時返回 Date 對象的小時 (0 ~ 23)。
getUTCMinutes()	根據世界時返回 Date 對象的分鐘 (0 ~ 59)。
getUTCSeconds()	根據世界時返回 Date 對象的秒鐘 (0 ~ 59)。
getUTCMilliseconds()	根據世界時返回 Date 對象的毫秒(0 ~ 999)。
parse()	返回1970年1月1日午夜到指定日期（字串）的毫秒數。
setDate()	設定 Date 對象中月的某一天 (1 ~ 31)。
setMonth()	設定 Date 對象中月份 (0 ~ 11)。
setFullYear()	設定 Date 對象中的年份（四位元字）。
setYear()	請使用 setFullYear() 方法代替。
setHours()	設定 Date 對象中的小時 (0 ~ 23)。
setMinutes()	設定 Date 對象中的分鐘 (0 ~ 59)。
setSeconds()	設定 Date 對象中的秒鐘 (0 ~ 59)。
setMilliseconds()	設定 Date 對象中的毫秒 (0 ~ 999)。
setTime()	以毫秒設定 Date 對象。
setUTCDate()	根據世界時設定 Date 對象中月份的一天 (1 ~ 31)。
setUTCMonth()	根據世界時設定 Date 對象中的月份 (0 ~ 11)。
setUTCFullYear()	根據世界時設定 Date 對象中的年份（四位元字）。
setUTCHours()	根據世界時設定 Date 對象中的小時 (0 ~ 23)。
setUTCMinutes()	根據世界時設定 Date 對象中的分鐘 (0 ~ 59)。
setUTCSeconds()	根據世界時設定 Date 對象中的秒鐘 (0 ~ 59)。
setUTCMilliseconds()	根據世界時設定 Date 對象中的毫秒 (0 ~ 999)。
toSource()	返回該對象的原始碼。
toString()	把 Date 對象轉換為字串。
toTimeString()	把 Date 對象的時間部分轉換為字串。
toDateString()	把 Date 對象的日期部分轉換為字串。
toGMTString()	請使用 toUTCString() 方法代替。
toUTCString()	根據世界時，把 Date 對象轉換為字串。
toLocaleString()	根據本地時間格式，把 Date 對象轉換為字串。
toLocaleTimeString()	根據本地時間格式，把 Date 對象的時間部分轉換為字串。
toLocaleDateString()	根據本地時間格式，把 Date 對象的日期部分轉換為字串。
UTC()	根據世界時返回 1970 年 1 月 1 日 到指定日期的毫秒數。
valueOf()	返回 Date 對象的原始值。

                                                                        下面對某些常用的方法進行詳細的案例分析：     

JavaScript裡的Date 對象屬性及對象方法－－實現簡單的日曆