[JavaScript] Date 日期

[JavaScript] Date 日期的格式與方法

JavaScript日期

JavaScript日期的顯示:

<!DOCTYPE html>
<html>
<body>

    <p id="demo"></p>

    <script>
        document.getElementById("demo").innerHTML = Date();
    </script>

</body>
</html>

將標籤id="demo"的內文指定其值為Date()

 

建立Date物件 

Date物件可以用來使用日期與顯示。日期由年、月、天、時、分、秒、毫秒組成。

new Date()可以建立一個Date物件,有4種方式:

new Date()
new Date("毫秒")
new Date("日期字串")
new Date("年", "月", "日", "時", "分", "秒", "毫秒")

 

Date( )

用new Date()來建立一個新的Date物件來顯示目前的日期與時間:

<!DOCTYPE html>
<html>
<body>

    <p id="demo"></p>

    <script>
        var NowDate = new Date();
        document.getElementById("demo").innerHTML = NowDate;
    </script>

</body>
</html>

var NowDate = new Date() 建立一個變數名為NowDate的Date物件。

 

Date("日期字串")

用new Date(指定日期)來建立一個新的Date物件來顯示指定的日期與時間:

<!DOCTYPE html>
<html>
<body>

    <p id="demo"></p>

    <script>
        var NowDate = new Date("December 30, 2015 12:00:00");
        document.getElementById("demo").innerHTML = NowDate;
    </script>

</body>
</html>

new Date("December 30, 2015 12:00:00") 指定日期的年月與時間。

new Date("毫秒")

用Date("毫秒")來建立一個新的Date物件,從0毫秒開始計算到指定毫秒的日期。

0毫秒表示1970年1月1日 00時00分00秒,一天為86400000毫秒。

<!DOCTYPE html>
<html>
<body>

    <p id="demo"></p>

    <script>
        var NowDate = new Date(100000000000);
        document.getElementById("demo").innerHTML = NowDate;
    </script>

</body>
</html>

new Date(100000000000) 指定顯示從0毫秒到100000000000毫秒的日期。

 

Date("年", "月", "日", "時", "分", "秒", "毫秒")

用Date("年", "月", "日", "時", "分", "秒", "毫秒")來建立一個新的Date物件來顯示指定的日期與時間:

<!DOCTYPE html>
<html>
<body>

    <p id="demo"></p>

    <script>
        var NowDate = new Date(2015, 10, 30, 11, 33, 30, 0);
        document.getElementById("demo").innerHTML = NowDate;
    </script>

</body>
</html>

new Date(2015, 10, 30, 11, 33, 30, 0) 分別指定日期為2015年11月30日11時33分30秒0毫秒。

JavaScript計算月份是由0到11,0代表一月,11代表12月。

日期參數也可以省略後段部分,只指定年跟月:

<!DOCTYPE html>
<html>
<body>

    <p id="demo"></p>

    <script>
        var NowDate = new Date(2015,10);
        document.getElementById("demo").innerHTML = NowDate;
    </script>

</body>
</html>

new Date(2015,10) 指定日期為2015年11月。

 

Date的方法

當建立一個Date物件後,便可以對這個物件使用一些Date的方法。

Date的方法可以取得與設定日期物件的年、月、日、時、分、秒、毫秒。

將Date物件顯示於HTML時,物件會自動用toString()方法轉換為字串:

<!DOCTYPE html>
<html>
<body>

    <p id="demo"></p>
    <p id="demo2"></p>

    <script>
        var NowDate = new Date();

        document.getElementById("demo").innerHTML = NowDate;
        document.getElementById("demo2").innerHTML = NowDate.toString();
    </script>

</body>
</html>

var NowDate = new Date() 定義變數NowDate為Date物件。

NowDateNowDate.toString() 皆會返回相同的日期字串。

 

使用toDateString()方法將物件轉換為更容易閱讀的日期格式:

<!DOCTYPE html>
<html>
<body>

    <p id="demo"></p>
    <p id="demo2"></p>

    <script>
        var NowDate = new Date();

        document.getElementById("demo").innerHTML = NowDate.toDateString();
    </script>

</body>
</html>

var NowDate = new Date() 定義變數NowDate為Date物件。

NowDate.toDateString() 轉換Date物件的顯示格式。

 

 Get方法 

getFullYear( ) 返回該日期為西元年幾年。

getMonth( ) 返回該日期為幾月(0~11)。

getDate( ) 返回該日期為當月第幾天(1~31日)。

getHours( ) 返回為幾時(0~23)。

getMinutes( ) 返回為幾分(0~59)。

getSeconds( ) 返回為幾秒(0~59)。

getMilliseconds( ) 返回為幾毫秒(0~999)。

getDay( ) 返回該日期為星期幾(0~6)。

 

使用Get方法取得變數的日期與時間:

<html>
<body>

    <p id="demo"></p>

    <script>
        var NowDate = new Date();

        document.getElementById("demo").innerHTML =
             NowDate + "<br>"
        + "西元年:" + NowDate.getFullYear() + "<br>"
        + "月份:" + NowDate.getMonth() + "<br>"
        + "日期:" + NowDate.getDate() + "<br>"
        + "時:" + NowDate.getHours() + "<br>"
        + "分:" + NowDate.getMinutes() + "<br>"
        + "秒:" + NowDate.getSeconds() + "<br>"
        + "毫秒:" + NowDate.getMilliseconds() + "<br>"
        + "星期:" + NowDate.getDay() + "<br>"
        ;
    </script>

</body>
</html>

var NowDate = new Date() 定義變數NowDate為目前時間。 

NowDate.getFullYear() 返回變數NowDate的西元年。

NowDate.getMonth() 返回變數NowDate的月份。

NowDate.getDate() 返回變數NowDate的日期。

NowDate.getHours() 返回變數NowDate的時。

NowDate.getMinutes() 返回變數NowDate的分。

NowDate.getSeconds() 返回變數NowDate的秒數。

NowDate.getMilliseconds() 返回變數NowDate的毫秒。

NowDate.getDay() 返回變數NowDate為星期幾。

 

 Set方法 

setFullYear( ) 設定日期為西元年幾年。

setMonth( ) 設定日期為幾月(0~11)。

setDate( ) 設定日期為當月第幾天(1~31日)。

setHours( ) 設定為幾時(0~23)。

setMinutes( ) 設定為幾分(0~59)。

setSeconds( ) 設定為幾秒(0~59)。

setMilliseconds( ) 設定為幾毫秒(0~999)。

 

使用Set方法設定變數的日期與時間:

<!DOCTYPE html>
<html>
<body>

    <p id="demo"></p>

    <script>
        var NowDate = new Date();
        NowDate.setFullYear(2020);
        NowDate.setMonth(12);
        NowDate.setDate(13);
        NowDate.setHours(0);
        NowDate.setMinutes(20);
        NowDate.setSeconds(50);
        NowDate.setMilliseconds(400);

        document.getElementById("demo").innerHTML =
             NowDate + "<br>"
        + "西元年:" + NowDate.getFullYear() + "<br>"
        + "月份:" + NowDate.getMonth() + "<br>"
        + "日期:" + NowDate.getDate() + "<br>"
        + "時:" + NowDate.getHours() + "<br>"
        + "分:" + NowDate.getMinutes() + "<br>"
        + "秒:" + NowDate.getSeconds() + "<br>"
        + "毫秒:" + NowDate.getMilliseconds() + "<br>"
        + "星期:" + NowDate.getDay() + "<br>"
        ;
    </script>

</body>
</html>

var NowDate = new Date() 定義變數NowDate為目前時間。 

NowDate.setFullYear(2020) 設定變數NowDate的西元年為2020。

NowDate.setMonth(12) 設定變數NowDate的月份為12(0)。

NowDate.setDate(13) 設定變數NowDate的日期為13。

NowDate.setHours(0) 設定變數NowDate的時為0(凌晨整點)。

NowDate.setMinutes(20) 設定變數NowDate的分為20。

NowDate.setSeconds(50) 設定變數NowDate的秒數為50。

NowDate.setMilliseconds(400) 設定變數NowDate的毫秒為400。

 

用Set與Get方法來增加日期與時間:

<!DOCTYPE html>
<html>
<body>

    <p id="demo"></p>

    <script>
        var NowDate = new Date();
        NowDate.setFullYear(NowDate.getFullYear()+1);
        NowDate.setMonth(NowDate.getMonth() + 1);
        NowDate.setDate(NowDate.getDate() + 1);
        NowDate.setHours(NowDate.getHours() + 1);
        NowDate.setMinutes(NowDate.getMinutes() + 1);
        NowDate.setSeconds(NowDate.getSeconds() + 1);
        NowDate.setMilliseconds(NowDate.getMilliseconds() + 1);

        document.getElementById("demo").innerHTML =
             NowDate + "<br>"
        + "西元年:" + NowDate.getFullYear() + "<br>"
        + "月份:" + NowDate.getMonth() + "<br>"
        + "日期:" + NowDate.getDate() + "<br>"
        + "時:" + NowDate.getHours() + "<br>"
        + "分:" + NowDate.getMinutes() + "<br>"
        + "秒:" + NowDate.getSeconds() + "<br>"
        + "毫秒:" + NowDate.getMilliseconds() + "<br>"
        + "星期:" + NowDate.getDay() + "<br>"
        ;
    </script>

</body>
</html>

var NowDate = new Date() 定義變數NowDate為目前時間。 

NowDate.getxxx()的方法都是在取得現在目前的日期,而外層的NowDate.setxxx()方法則是將取得的日期設定為+1。

 

日期的轉換

Date.parse( ) 

能夠將一段日期的字串轉換為毫秒(從西元1970年1月1日開始到現在的毫秒數):

<!DOCTYPE html>
<html>
<body>

    <p id="demo"></p>

    <script>
        var Date = Date.parse("Novamber 7,2016");
        document.getElementById("demo").innerHTML = Date;
        ;
    </script>

</body>
</html>

Date.parse("Novamber 7,2016") 將字串"Novamber 7,2016"轉換為毫秒。

 

也可以將毫秒轉換為日期物件:

<!DOCTYPE html>
<html>
<body>

    <p id="demo"></p>

    <script>
        var Date_Milliseconds = Date.parse("Novamber 7,2016");
        var Date_Object = new Date(Date_Milliseconds);
        document.getElementById("demo").innerHTML = Date_Object;
    </script>

</body>
</html>

Date.parse("Novamber 7,2016") 將字串"Novamber 7,2016"轉換為毫秒。

new Date(Date_Milliseconds) 新定義一個Date物件,日期指定為"Novamber 7,2016"的毫秒

 

日期的比較

可以將兩個日期做日期大小比較,如下:

<!DOCTYPE html>
<html>
<body>

    <p id="demo"></p>

    <script>
        var today, years_later, text;
        today = new Date();
        years_later = new Date();
        years_later.setFullYear("2020,1,1");

        if (today > years_later)
        {
            text = "今天是2020年1月1日之後";
        }
        else
        {
            text = "今天是2020年1月1日之前";
        }
        document.getElementById("demo").innerHTML = text;
    </script>

</body>
</html>

var today, years_later, text 定義三個變數。

today = new Date() 定義變數today 為日期物件,不指定日期以表示現在的日期與時間。

years_later.setFullYear(2020, 0, 14) 設定變數years_later為2020年1月1日。

if (today > years_later) 判斷變數today 是否大於變數years_later。

 

日期格式

語法(YYYY-MM-DD)的日期格式:

<!DOCTYPE html>
<html>
<body>

    <p id="demo"></p>

    <script>
        var sDate = new Date("2016-12-13");

        document.getElementById("demo").innerHTML = sDate;
    </script>

</body>
</html>

new Date("2016-12-13") 輸入日期為2016年12月13日。

也可以只輸入年月new Date("2016-12")或只輸入年分new Date("2016")。

 

語法(YYYY-MM-DD HH:MM:SS)顯示時、分、秒:

<!DOCTYPE html>
<html>
<body>

    <p id="demo"></p>

    <script>
        var sDate = new Date("2016-12-13 11:13:00");

        document.getElementById("demo").innerHTML = sDate;
    </script>

</body>
</html>

new Date("2016-12-13 11:13:00") 輸入日期為2016年12月13日11點13分0秒。

 

語法(YYYY/MM/DD)的日期格式:

<!DOCTYPE html>
<html>
<body>

    <p id="demo"></p>

    <script>
        var sDate = new Date("2016/12/13");

        document.getElementById("demo").innerHTML = sDate;
    </script>

</body>
</html>

new Date("2016/12/13") 輸入日期為2016年12月13日。

也可以輸入new Date("12/13/2016")將年份擺在後面。

 

語法("MMM DD YYYY")的日期格式:

<!DOCTYPE html>
<html>
<body>

    <p id="demo"></p>

    <script>
        var sDate = new Date("2016 January 1");

        document.getElementById("demo").innerHTML = sDate;
    </script>

</body>
</html>

new Date("2016 January 1") 輸入日期為2016年1月1日。

 

 END 

回目錄