本文详解JavaScript中获取日期的常见陷阱,重点区分getDay与getDate、getMonth的返回值差异,并提供完整的HTML与JS代码示例,实现页面实时显示当前年月日、星期及时间。
前言
JavaScript时间获取的关键注意事项
本文重新梳理了相关知识点,重点总结实际操作中容易出错的关键细节。
第一点需要注意,通过getDay()方法获取的星期数值是从0开始的,其中0代表星期天,随后的1至6分别对应星期一至星期六。
第二点,获取具体日期数字时应当使用getDate()方法,而非getDay() 。初学者常误以为日期就是天数而使用getDay() ,但实际上getDay()专门用于获取星期数,二者功能不同。
第三点,通过getMonth()方法获取月份时,返回值同样是从0开始计数的,因此在显示时需要手动加1才能得到实际的月份数。
具体的实现代码如下:
页面实时显示时间的完整代码实现
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<link rel="stylesheet" type="text/css" href="">
<script type="text/javascript"></script>
<style type="text/css">
input{
width: 200px;
}
</style>
</head>
<body>
<input id="input">
<script type="text/javascript">
var in_1 = document.getElementById('input');
function showTime(){
var date = new Date();
var week = date.getDay();
var weekday;
switch(week){
case 0: weekday = '星期天';break;
case 1: weekday = '星期一';break;
case 2: weekday = '星期二';break;
case 3: weekday = '星期三';break;
case 4: weekday = '星期四';break;
case 5: weekday = '星期五';break;
case 6: weekday = '星期六';break;
}
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
var hour = date.getHours();
var minute = date.getMinutes();
var second = date.getSeconds();
var in_1 = document.getElementById('input');
in_1.value = year + '年' + month + "月" + day + '日'+' ' + weekday + ' ' + hour + ':' + minute + ':' + second;
setTimeout(showTime,1000);
}
showTime();
</script>
</body>
</html>
总结
以上介绍了利用JavaScript在网页中实时显示当前时间的完整方案。该方法逻辑清晰且易于理解,适合初学者学习或直接集成到项目中。若对内容有任何疑问,欢迎留言交流。