极客笔记JS 显示时间
在网页开发中，显示时间是一项常见的需求。通过Javascript，我们可以很方便地获取当前时间并在网页上显示出来。本文将详细介绍如何使用Javascript来显示时间。
获取当前时间
要显示当前时间，首先需要获取当前的日期和时间。Javascript提供了Date对象来处理日期和时间。我们可以通过创建一个Date对象来获取当前时间。
var now = new Date();
上面的代码通过new Date()创建了一个Date对象，即当前时间。接下来我们可以使用Date对象提供的方法来获取年、月、日、时、分、秒等信息。
var year = now.getFullYear();
var month = now.getMonth() + 1; // 月份范围是 0-11，所以要加1
var day = now.getDate();
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
格式化时间
获取到年、月、日、时、分、秒等信息后，我们通常希望将其以一定的格式显示在网页上，常见的格式包括yyyy-MM-dd HH:mm:ss等。下面我们来实现一个函数，将时间格式化为指定的格式。
function formatTime(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();
// 补零函数
function addZero(num) {
return num < 10 ? '0' + num : num;
}
return year + '-' + addZero(month) + '-' + addZero(day) + ' ' + addZero(hour) + ':' + addZero(minute) + ':' + addZero(second);
}
// 格式化当前时间
var formattedTime = formatTime(now);
console.log(formattedTime);
上述代码中，formatTime函数接受一个Date对象作为参数，然后根据年、月、日、时、分、秒等信息，使用addZero函数补零并以指定的格式拼接成字符串返回。最后我们调用formatTime函数将当前时间格式化，并打印到控制台。
在网页上显示时间
获取并格式化时间后，我们可以将其显示在网页上。在HTML中，我们可以通过添加一个<div>或<span>元素，并设置其innerText来显示时间。
<!DOCTYPE html>
<html>
<head>
<title>Show Time</title>
</head>
<body>
<div id="time"></div>
<script>
function showTime() {
var now = new Date();
var formattedTime = formatTime(now);
document.getElementById('time').innerText = formattedTime;
}
// 每秒更新时间
setInterval(showTime, 1000);
</script>
</body>
</html>
在上述代码中，我们首先添加一个<div>元素，并为其指定一个id为time。然后在<script>标签中定义了showTime函数，该函数会获取当前时间并调用formatTime函数将时间格式化。最后通过setInterval函数每秒调用showTime函数，以实现时间的实时显示。
运行结果
将上述HTML代码保存为show_time.html文件，并在浏览器中打开该文件，即可实现每秒更新时间并在网页上显示的效果。
2021-10-12 15:30:45
2021-10-12 15:30:46
2021-10-12 15:30:47
...
通过上述代码，我们实现了使用Javascript显示时间的功能，并将时间实时更新显示在网页上。在实际开发中，可以根据需求对时间的显示格式进行调整，以满足不同的需求。