文章目录
- JavaScript Date 日期对象实例合集
- 一，使用 Date() 方法获得当日的日期
- 二，使用 getFullYear() 获取年份
- 三，使用getTime() 返回从 1970 年 1 月 1 日至今的毫秒数
- 四，如何使用 setFullYear() 设置具体的日期
- 五，使用 toUTCString() 将当日的日期（根据 UTC）转换为字符串
- 六，使用 getDay() 和数组来显示星期，而不仅仅是数字
- 七，在网页上显示一个钟表
JavaScript Date 日期对象实例合集
本文用于收集与JavaScript Date 日期对象相关的实例~
一，使用 Date() 方法获得当日的日期
源码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
var d=new Date();
document.write(d);
</script>
</body>
</html>
运行效果：
二，使用 getFullYear() 获取年份
源码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p id="demo">点击按钮获取今年的年份。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
var d = new Date();
var x = document.getElementById("demo");
x.innerHTML=d.getFullYear();
}
</script>
</body>
</html>
运行效果：
三，使用getTime() 返回从 1970 年 1 月 1 日至今的毫秒数
源码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></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></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></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></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></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>
运行效果：
