JavaScript Date对象常用方法详解与示例

作者:函数茶馆

时间:2026-10-29

浏览:386

本文详细介绍JavaScript中Date对象的常用方法,包括使用getFullYear()获取年份、getTime()获取毫秒时间戳、setFullYear()修改日期、toUTCString()转换UTC字符串以及getDay()结合数组显示星期。此外,还展示了如何在网页中动态显示实时时钟,帮助开发者掌握日期时间处理的核心技巧。

文章目录

获取年份与时间戳

要获取完整的四位年份,可以使用 Date 对象的 getFullYear() 方法。


</script>
<!DOCTYPE html>
<html>
<body>
​
<p id="demo">Click the button to display the full year of todays date.</p>
​
<button onclick="myFunction()">Try it</button>
​
<script>
function myFunction()
{
var d = new Date();
var x = document.getElementById("demo");
x.innerHTML=d.getFullYear();
}
</script>
​
</body>
</html>     

运行上述代码后的输出结果如下。


2015

getTime() 方法用于返回自 1970 年 1 月 1 日 00:00:00(UTC)以来经过的毫秒数。


<!DOCTYPE html>
<html>
<body>
​
<p id="demo">Click the button to display the number of milliseconds since midnight, January 1, 1970.</p>
​
<button onclick="myFunction()">Try it</button>
​
<script>
function myFunction()
{
var d = new Date();
var x = document.getElementById("demo");
x.innerHTML=d.getTime();
}
</script>
​
</body>
</html> 

执行该段代码后,控制台或页面将显示具体的毫秒数值。


1445669203860

设置日期与转换UTC字符串

若需修改日期的具体年份,可使用 setFullYear() 方法。该方法允许指定年、月(0-11)和日。


<!DOCTYPE html>
<html>
<body>
​
<p id="demo">Click the button to display a date after changing the year, month, and day.</p>
​
<button onclick="myFunction()">Try it</button>
​
<script>
function myFunction()
{
var d = new Date();
d.setFullYear(2020,10,3);
var x = document.getElementById("demo");
x.innerHTML=d;
}
</script>
​
<p>Remember that JavaScript counts months from 0 to 11.
Month 10 is November.</p>
</body>
</html>     

调用 setFullYear() 后,Date 对象将更新为指定的新日期。


Tue Nov 03 2020 14:47:46 GMT+0800 (中国标准时间)

toUTCString() 方法将 Date 对象转换为 UTC(协调世界时)格式的字符串表示。

以下是实现该转换的代码片段。


<!DOCTYPE html>
<html>
<body>
​
<p id="demo">Click the button to display the UTC date and time as a string.</p>
​
<button onclick="myFunction()">Try it</button>
​
<script>
function myFunction()
{
var d = new Date();
var x = document.getElementById("demo");
x.innerHTML=d.toUTCString();
}
</script>
​
</body>
</html> 

执行代码后,页面将显示转换后的 UTC 时间字符串。


Sat, 24 Oct 2015 06:49:05 GMT

显示星期与实时时钟

getDay() 方法返回一周中的某一天(0 表示周日,6 表示周六)。为了更直观地显示星期名称,可以结合 JavaScript 数组进行映射。


<!DOCTYPE html>
<html>
<body>
​
<p id="demo">Click the button to display todays day of the week.</p>
​
<button onclick="myFunction()">Try it</button>
​
<script>
function myFunction()
{
var d = new Date();
var weekday=new Array(7);
weekday[0]="Sunday";
weekday[1]="Monday";
weekday[2]="Tuesday";
weekday[3]="Wednesday";
weekday[4]="Thursday";
weekday[5]="Friday";
weekday[6]="Saturday";
​
var x = document.getElementById("demo");
x.innerHTML=weekday[d.getDay()];
}
</script>
​
</body>
</html>  

 

通过数组映射,代码将输出对应的星期英文单词。


Saturday

最后,介绍如何在网页中动态显示一个实时运行的时钟。


<!DOCTYPE html>
<html>
<head>
<script>
function startTime()
{
var today=new Date();
var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();
// add a zero in front of numbers<10
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>    


实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章