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>
提交重置代码
章节课件