在前端开发中,取当前时间是一个非常常见的需求。JS 提供了多种方式来获取当前时间。本文将从多个方面来详细阐述 JS 取当前时间的方法和应用场景。
一、使用 Date() 方法获取当前时间
Date() 是 JS 中获取当前时间最基础的方法。它返回的是当前时间的时间戳,可以根据时间戳来获取具体的年月日时分秒。
let now = new Date(); // 获取当前时间
let year = now.getFullYear(); // 获取当前年份
let month = now.getMonth() + 1; // 获取当前月份,加“1”是因为月份是从0开始计算的,但实际月份是从1开始的
let day = now.getDate(); // 获取当前日期
let hour = now.getHours(); // 获取当前小时数
let minute = now.getMinutes(); // 获取当前分钟数
let second = now.getSeconds(); // 获取当前秒数
let millisecond = now.getMilliseconds(); // 获取当前毫秒数
let time = now.getTime(); // 获取当前时间的时间戳
使用 Date() 方法获取当前时间,可以适用于大部分需要获取时间的场景。例如,可以根据获取的年月日时分秒来自定义显示时间的格式。
二、使用 moment.js 库获取当前时间
moment.js 是一个非常常见的 JS 库,用于方便地获取当前时间和操作时间。相对于 Date() 方法,moment.js 在格式化显示时间方面更加便捷。在实际开发中,比较常见的使用场景是处理不同时区的时间显示问题。
let now = moment(); // 获取当前时间
let year = now.format('YYYY'); // 获取当前年份
let month = now.format('MM'); // 获取当前月份
let day = now.format('DD'); // 获取当前日期
let hour = now.format('HH'); // 获取当前小时数
let minute = now.format('mm'); // 获取当前分钟数
let second = now.format('ss'); // 获取当前秒数
let millisecond = now.format('SSS'); // 获取当前毫秒数
使用 moment.js 库,可以方便地根据需要来格式化显示时间。例如,可以格式化为“YYYY-MM-DD HH:mm:ss”这样的标准时间格式。
三、使用 setInterval() 方法实现动态显示时间
setInterval() 方法是 JS 中常用的定时器方法,可以在一定的时间间隔内执行指定的函数。使用 setInterval() 方法可以实现动态显示当前时间的功能。
let timeBox = document.getElementById('timebox');
function showTime() {
let now = new Date();
let year = now.getFullYear();
let month = now.getMonth() + 1;
let day = now.getDate();
let hour = now.getHours();
let minute = now.getMinutes();
let second = now.getSeconds();
let timeStr = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
timeBox.innerText = timeStr;
}
setInterval(showTime, 1000); // 每秒执行一次 showTime() 函数
使用 setInterval() 方法可以实现当前时间的实时更新,适用于需要实时显示时间的场景。例如,可以将其用于直播、在线考试等场景中。
四、使用 setTimeout() 方法实现倒计时
setTimeout() 方法也是 JS 中常用的定时器方法,可以在指定的时间后执行指定的函数。使用 setTimeout() 方法可以实现倒计时的功能。
let countDownBox = document.getElementById('countdown');
let endTime = new Date('2021/12/31 23:59:59'); // 倒计时结束时间
function countDown() {
let nowTime = new Date();
let diffTimeSeconds = parseInt((endTime - nowTime) / 1000); // 获取剩余时间(单位:秒)
if (diffTimeSeconds <= 0) {
countDownBox.innerText = '倒计时结束!';
} else {
let hours = parseInt(diffTimeSeconds / 3600);
let minutes = parseInt((diffTimeSeconds - hours * 3600) / 60);
let seconds = diffTimeSeconds - hours * 3600 - minutes * 60;
let hoursStr = ('00' + hours).substr(-2); // 对字符串进行补0操作
let minutesStr = ('00' + minutes).substr(-2);
let secondsStr = ('00' + seconds).substr(-2);
let timeStr = hoursStr + ':' + minutesStr + ':' + secondsStr;
countDownBox.innerText = '倒计时:' + timeStr;
setTimeout(countDown, 1000); // 每秒更新一次倒计时
}
}
countDown();
使用 setTimeout() 方法可以实现倒计时的功能,适用于需要倒计时的场景,例如:京东618、双11秒杀活动等。
五、使用第三方时间库 luxon.js 管理时间
luxon.js 是一个增强版的 JS 时间库,它可以方便地进行时间的管理和操作。相对于原生 JS 时间方法,它支持多种时间格式和时区,可以实现非常精细的时间处理。
let now = luxon.DateTime.now(); // 获取当前时间
let year = now.year; // 获取当前年份
let month = now.month; // 获取当前月份
let day = now.day; // 获取当前日期
let hour = now.hour; // 获取当前小时数
let minute = now.minute; // 获取当前分钟数
let second = now.second; // 获取当前秒数
let millisecond = now.millisecond; // 获取当前毫秒数
使用 luxon.js 库,可以进行非常精细的时间处理,包括:时区处理、格式化、持续时间计算等。适用于需要进行复杂时间处理的场景,例如:航班预定、旅行计划等。