JS动态加载当前时间的方法

JS动态加载当前时间的方法可以通过以下步骤实现：

1. 创建一个容器元素

首先，我们需要在HTML文件中创建一个容器元素用于显示当前时间。可以选择使用div、p、span等标签。

<div id="current-time"></div>

2. 获取当前时间

接着，我们需要使用JS代码获取当前时间。可以使用Date对象或者moment.js等库进行时间的获取和格式化。下面是使用Date对象获取当前时间的示例代码：

var currentDate = new Date();
var hours = currentDate.getHours();
var minutes = currentDate.getMinutes();
var seconds = currentDate.getSeconds();

3. 格式化当前时间

获取当前时间后，需要将其格式化为需要的字符串格式。下面是将时间格式化为“hh:mm:ss”的示例代码：

var currentTime = hours + ":" + minutes + ":" + seconds;

4. 将格式化后的时间显示在容器中

最后，我们需要将格式化后的时间显示在HTML页面的容器中。可以使用innerHTML属性或者jQuery等库进行元素内容的替换。下面是使用innerHTML属性将时间显示在容器中的示例代码：

document.getElementById('current-time').innerHTML = currentTime;

示例 1

下面是一个简单的动态加载当前时间的代码示例。该示例将时间每隔1000ms更新一次，并显示在页面上：

<div id="current-time"></div>

<script>
function updateTime() {
  var currentDate = new Date();
  var hours = currentDate.getHours();
  var minutes = currentDate.getMinutes();
  var seconds = currentDate.getSeconds();
  var currentTime = hours + ":" + minutes + ":" + seconds;
  document.getElementById('current-time').innerHTML = currentTime;
}

setInterval(updateTime, 1000);
</script>

示例 2

下面是使用moment.js库获取并格式化当前时间的代码示例。该示例将时间每隔1分钟更新一次，并显示在页面上：

<div id="current-time"></div>

<script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script>
function updateTime() {
  var currentDate = moment().format("hh:mm:ss A");
  document.getElementById('current-time').innerHTML = currentDate;
}

setInterval(updateTime, 60000);
</script>

以上两个示例可以按照自己的需求进行修改和调整。注意，对于展示时间的容器元素，需要设置合适的样式和位置，以便于页面的美观和易读性。