JS简单获取及显示当前时间的方法可以使用JavaScript中的Date对象。下面是实现该方法的完整步骤：
1. 获取当前时间
在JavaScript中，可以创建一个Date对象，用它来表示当前时间。
let currentDate = new Date();
这个Date对象表示的就是当前时间。如果你想获取特定事件的时间，可以传入相应的日期和时间参数，例如：
// 获取2022年1月1日12:00:00的时间
let specificDate = new Date(2022,0,1,12,0,0);
2. 格式化时间
我们可以用一些方法来把日期转换为特定的字符串格式。
JavaScript中，可以使用Date对象中的方法来获取年、月、日、时、分、秒等信息。
let year = currentDate.getFullYear(); // 年
let month = currentDate.getMonth() + 1; // 月（Month从0开始，所以要加1）
let date = currentDate.getDate(); // 日
let hour = currentDate.getHours(); // 时
let minute = currentDate.getMinutes(); // 分
let second = currentDate.getSeconds(); // 秒
然后，可以使用模板字符串来将这些信息组合成自己想要的格式。
let timeString = `${year}-${month}-${date} ${hour}:${minute}:${second}`;
这里使用了${}语法，它是ES6中的模板字符串语法，可以用来方便地拼接字符串和变量。
3. 显示时间
最后，将时间字符串显示在HTML页面上。可以使用document对象的getElementById方法获取到HTML页面中的元素，然后将时间字符串赋值给元素的innerHTML属性。
<div id="current-time"></div>
let timeDivElement = document.getElementById("current-time");
timeDivElement.innerHTML = timeString;
这样，就可以在HTML页面中显示当前时间了。
示例1
下面是一个完整的，将时间显示在HTML页面上的示例代码：
<!DOCTYPE html>
<html>
<body>
<div id="current-time"></div>
<script>
let currentDate = new Date();
let year = currentDate.getFullYear();
let month = currentDate.getMonth() + 1;
let date = currentDate.getDate();
let hour = currentDate.getHours();
let minute = currentDate.getMinutes();
let second = currentDate.getSeconds();
let timeString = `${year}-${month}-${date} ${hour}:${minute}:${second}`;
let timeDivElement = document.getElementById("current-time");
timeDivElement.innerHTML = timeString;
</script>
</body>
</html>
示例2
下面是另一个示例代码，用于周期地更新页面上的时间。
<!DOCTYPE html>
<html>
<body>
<div id="current-time"></div>
<script>
function updateClock() {
let currentDate = new Date();
let year = currentDate.getFullYear();
let month = currentDate.getMonth() + 1;
let date = currentDate.getDate();
let hour = currentDate.getHours();
let minute = currentDate.getMinutes();
let second = currentDate.getSeconds();
let timeString = `${year}-${month}-${date} ${hour}:${minute}:${second}`;
let timeDivElement = document.getElementById("current-time");
timeDivElement.innerHTML = timeString;
}
setInterval(updateClock, 1000);
</script>
</body>
</html>
这里使用了setInterval方法来周期地更新时间。setInterval方法接受两个参数，第一个参数是要执行的函数，第二个参数是更新时间间隔的毫秒数，这里设置成每秒更新一次。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS简单获取及显示当前时间的方法 - Python技术站
微信扫一扫 
支付宝扫一扫 