JavaScript Date...LOGIN

JavaScript Date(日期)對象

本章介紹了JavaScript Date(日期)物件。

日期物件用於處理日期和時間。

JavaScript Date(日期)物件實例

如何使用Date() 方法取得當天的日期:

<html>
<meta charset="utf-8">
<body>
<script type="text/javascript">
document.write(Date())
</script>
</body>
</html>

getTime() 傳回從1990 年1 月1 日至今的毫秒數:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p id="demo">单击按钮显示1970年1月1号至今的毫秒数。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	var d = new Date();
	var x = document.getElementById("demo");
	x.innerHTML=d.getTime();
}
</script>
</body>
</html>

如何使用setFullYear() 設定特定的日期:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p id="demo">单击按钮显示修改后的年月日。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
var d = new Date();
d.setFullYear(2020,10,3);
var x = document.getElementById("demo");
x.innerHTML=d;
}
</script>
<p>记住JavaScript月数是从0至11。10是11月。</p>
</body>
</html>

如何使用toUTCString() 將當日的日期(根據UTC)轉換為字串:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p id="demo">点击按钮把utc日期和时间转换成字符串。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
var d = new Date();
var x = document.getElementById("demo");
x.innerHTML=d.toUTCString();
}
</script>
</body>
</html>

如何使用getDay() 和陣列來顯示星期,而不僅僅是數字:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p id="demo">单击按钮显示今天周几</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
var d = new Date();
var weekday=new Array(7);
weekday[0]="周日";
weekday[1]="周一";
weekday[2]="周二";
weekday[3]="周三";
weekday[4]="周四";
weekday[5]="周五";
weekday[6]="周六";
var x = document.getElementById("demo");
x.innerHTML=weekday[d.getDay()];
}
</script>
</body>
</html>

如何在網頁上顯示一個鐘錶:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<script>
function startTime(){
    var today=new Date();
    var h=today.getHours();
    var m=today.getMinutes();
    var s=today.getSeconds();// 在小于10的数字钱前加一个‘0’
    m=checkTime(m);
    s=checkTime(s);
    document.getElementById('txt').innerHTML=h+":"+m+":"+s;
    t=setTimeout(function(){startTime()},500);
}
function checkTime(i){
    if (i<10){
        i="0" + i;
    }
    return i;
}
</script>
</head>
<body onload="startTime()">
    
<div id="txt"></div>
    
</body>
</html>

建立日期

Date 物件用於處理日期和時間。 

可以透過 new 關鍵字來定義 Date 物件。以下程式碼定義了名為myDate 的Date 物件:

有四種方式初始化日期:

new Date() // 目前日期和時間
new Date(milliseconds) //傳回從1970 年1 月1 日至今的毫秒數
new Date(dateString)
new Date(year, month, day, hours, minutes, seconds, milliseconds)

上面的參數大多數都是可選的,在不指定的情況下,預設參數是0。

<p從1970="" 年="" 1="" 月="" 日通用一天計算為86,400,000毫秒<="" p="" style="color: rgb(51 , 51, 51); font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, STHeiti, 'Microsoft Yahei', sans-serif; font-size: 12px; line-height: normal; white-space : normal; background-color: rgb(255, 255, 255);">

實例化一個日期的一些例子:

var today = new Date()
var d1 = new Date("October 13, 1975 11:13:00")
var d2 = new Date(79,5,24)
var d3 = new Date(79,5,24,11,33 ,0)

設定日期

透過使用針對日期物件的方法,我們可以輕鬆地對日期進行操作。

在下面的例子中,我們為日期物件設定了一個特定的日期(2010 年1 月14 日):

var myDate=new Date();
myDate. setFullYear(2010,0,14);

在下面的範例中,我們將日期物件設為5 天後的日期:

var myDate=new Date();
myDate .setDate(myDate.getDate()+5);

注意: 如果增加天數會改變月份或年份,那麼日期物件會自動完成這種轉換。

兩個日期比較

日期物件也可用來比較兩個日期。

下面的程式碼將目前日期與 2100 年 1 月 14 日進行了比較:

var x=new Date();
x.setFullYear(2100,0,14);
var today = new Date();

if (x>today)
{
alert("今天是2100年1月14日之前");
}
else
{
alert("今天是2100年1月14日之後");
}


下一節
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <p id="demo">单击按钮显示今天周几</p> <button onclick="myFunction()">点我</button> <script> function myFunction(){ var d = new Date(); var weekday=new Array(7); weekday[0]="周日"; weekday[1]="周一"; weekday[2]="周二"; weekday[3]="周三"; weekday[4]="周四"; weekday[5]="周五"; weekday[6]="周六"; var x = document.getElementById("demo"); x.innerHTML=weekday[d.getDay()]; } </script> </body> </html>
章節課件