javascript实时显示北京时间的方法

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

实时显示北京时间可以用JavaScript来实现，具体实现方法有多种，下面我将分享两种常用方法，分别是：

第一种方法：使用Date对象实现实时更新北京时间

在HTML文件中通过<script>标签引入JavaScript代码，如下：

<!DOCTYPE html>
<html>
  <head>
    <title>实时显示北京时间</title>
  </head>
  <body>
    <span id="bj-time"></span>
    <script src="js/show-time.js"></script>
  </body>
</html>

在show-time.js文件中编写JavaScript代码：

function showTime() {
  var date = new Date();
  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();

  // 将日期时间格式化为字符串，例如：2021年6月1日 12:30:45
  var timeStr = year + "年" + month + "月" + day + "日 " + hour + ":" + minute + ":" + second;

  // 将时间显示在页面上
  document.getElementById("bj-time").innerHTML = timeStr;
}

// 每隔1秒执行一次showTime函数，实现实时更新时间
setInterval(showTime, 1000);

保存文件，并在浏览器中打开HTML文件，即可看到实时显示北京时间的效果。每隔1秒钟，页面上的时间会实时更新。

第二种方法：使用moment.js库实现实时更新北京时间

在HTML文件中通过<script>标签引入moment.js库和JavaScript代码，如下：

<!DOCTYPE html>
<html>
  <head>
    <title>实时显示北京时间</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
  </head>
  <body>
    <span id="bj-time"></span>
    <script src="js/show-time.js"></script>
  </body>
</html>

在show-time.js文件中编写JavaScript代码：

function showTime() {
  moment.locale("zh-cn"); // 设置moment.js库使用中文语言环境
  var bjMoment = moment().utcOffset(480); // 创建moment对象并设置北京时区偏移量
  var timeStr = bjMoment.format("YYYY年M月D日 HH:mm:ss"); // 将日期时间格式化为字符串，例如：2021年6月1日 12:30:45
  document.getElementById("bj-time").innerHTML = timeStr; // 将时间显示在页面上
}

// 每隔1秒执行一次showTime函数，实现实时更新时间
setInterval(showTime, 1000);