JavaScript显示当然日期和时间即年月日星期和时间

2023年5月27日下午1:24 • JavaScript

想要在网页上显示当前日期和时间，可以使用JavaScript编写代码实现。下面是详细的攻略：

步骤一：获取当前时间

使用JavaScript中的Date对象的get方法可以获取当前时间的各个部分，包括年份、月份、日期、小时、分钟、秒和毫秒。其中，getDay方法可以获取星期几，0表示星期日，1表示星期一，以此类推。下面是获取当前时间的代码：

var date = new Date(); // 获取当前时间
var year = date.getFullYear(); // 获取当前年份
var month = date.getMonth() + 1; // 获取当前月份（注意月份要+1）
var day = date.getDate(); // 获取当前日期
var week = date.getDay(); // 获取星期几
var hour = date.getHours(); // 获取当前小时数
var minute = date.getMinutes(); // 获取当前分钟数
var second = date.getSeconds(); // 获取当前秒数

步骤二：格式化时间

获取到时间之后，需要将其格式化成字符串形式，以便在网页上显示。可以使用字符串拼接的方式拼接出所需要的格式。下面是将时间格式化成“年月日星期几时间”的代码：

// 将星期几转换成汉字形式
var weekStr = ['日', '一', '二', '三', '四', '五', '六'][week];
// 将时间格式化成字符串形式
var timeStr = year + '年' + month + '月' + day + '日 ' + '星期' + weekStr + ' ' + hour + ':' + minute + ':' + second;

步骤三：在网页上显示时间

将格式化后的时间，通过DOM操作添加到网页上，即可在网页上显示当前时间。下面是将时间显示在网页上的代码：

// 将格式化后的时间添加到id为time的元素中
document.getElementById('time').innerHTML = timeStr;

示例1：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>显示当前时间</title>
</head>
<body>
  <div id="time"></div>
  <script>
    var date = new Date(); // 获取当前时间
    var year = date.getFullYear(); // 获取当前年份
    var month = date.getMonth() + 1; // 获取当前月份（注意月份要+1）
    var day = date.getDate(); // 获取当前日期
    var week = date.getDay(); // 获取星期几
    var hour = date.getHours(); // 获取当前小时数
    var minute = date.getMinutes(); // 获取当前分钟数
    var second = date.getSeconds(); // 获取当前秒数

    // 将星期几转换成汉字形式
    var weekStr = ['日', '一', '二', '三', '四', '五', '六'][week];
    // 将时间格式化成字符串形式
    var timeStr = year + '年' + month + '月' + day + '日 ' + '星期' + weekStr + ' ' + hour + ':' + minute + ':' + second;

    // 将格式化后的时间添加到id为time的元素中
    document.getElementById('time').innerHTML = timeStr;
  </script>
</body>
</html>

示例2：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>显示当前时间</title>
  <style>
    #time {
      font-size: 24px;
      color: red;
      text-align: center;
      margin-top: 100px;
    }
  </style>
</head>
<body>
  <div id="time"></div>
  <script>
    setInterval(function() {
      var date = new Date(); // 获取当前时间
      var year = date.getFullYear(); // 获取当前年份
      var month = date.getMonth() + 1; // 获取当前月份（注意月份要+1）
      var day = date.getDate(); // 获取当前日期
      var week = date.getDay(); // 获取星期几
      var hour = date.getHours(); // 获取当前小时数
      var minute = date.getMinutes(); // 获取当前分钟数
      var second = date.getSeconds(); // 获取当前秒数

      // 将星期几转换成汉字形式
      var weekStr = ['日', '一', '二', '三', '四', '五', '六'][week];
      // 将时间格式化成字符串形式
      var timeStr = year + '年' + month + '月' + day + '日 ' + '星期' + weekStr + ' ' + hour + ':' + minute + ':' + second;

      // 将格式化后的时间添加到id为time的元素中
      document.getElementById('time').innerHTML = timeStr;
    }, 1000);
  </script>
</body>
</html>

以上是JavaScript显示当前日期和时间的完整攻略，包括获取当前时间、格式化时间和在网页上显示时间等步骤。同时还提供了两条示例，分别实现了一次性显示时间和动态更新时间。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JavaScript显示当然日期和时间即年月日星期和时间 - Python技术站