这篇文章主要介绍了 JavaScript 中 Date 对象的常用方法示例, Date 对象的相关运用是 JS 入门学习中的基础知识, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
getFullYear()
使用 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()
getTime() 返回从 1970 年 1 月 1 日至今的毫秒数。
源代码:
- <!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
setFullYear()
如何使用 setFullYear() 设置具体的日期。
源代码:
- <!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>
测试结果:
- Tue Nov 03 2020 14:47:46 GMT+0800 (中国标准时间)
toUTCString()
如何使用 toUTCString() 将当日的日期(根据 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>
测试结果:
- Sat, 24 Oct 2015 06:49:05 GMT
getDay()
如何使用 getDay() 和数组来显示星期,而不仅仅是数字。
源代码:
- <!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
Display a clock
如何在网页上显示一个钟表。
源代码:
- <!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>
来源: