JavaScript获取当前时间常见误区与实时显示实现

作者:木棉

时间:2026-10-30

浏览:501

本文详解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在网页中实时显示当前时间的完整方案。该方法逻辑清晰且易于理解,适合初学者学习或直接集成到项目中。若对内容有任何疑问,欢迎留言交流。

实用工具推荐

电子包浆

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

使用 ›
图片压缩

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

使用 ›
相关文章