业务中有时会遇到页面要展示当前时间的操作,如果直接new Date()获取的是当前电脑的时间,如果用户当前电脑时间不准确,我们获取到的时间也不准确,这时候就要从服务器获取时间,如果每隔一秒钟去调一次接口就会增加服务器的压力,这时候就要前端自己去让时间走起来。
假设你已经获取到一个固定时间,可以通过 setInterval 函数来实现让时间走起来:
// 假设固定时间是 2023年5月1日14时30分0秒
const fixedTime = new Date('2023-05-01T14:30:00');
// 每秒执行一次 update 函数,更新时间
setInterval(update, 1000);
function update() {
// 获取当前时间
const now = new Date();
// 计算与固定时间的时间差(单位为毫秒)
const diff = now - fixedTime;
// 将时间差转换为秒数
const seconds = Math.floor(diff / 1000);
// 计算当前时间是多少秒之后
const newTime = new Date(fixedTime.getTime() + seconds * 1000);
// 格式化时间,例如:14:30:15
const timeString = newTime.toLocaleTimeString([], { hour12: false });
// 更新页面上显示的时间
document.getElementById('clock').textContent = timeString;
}
在上面的示例中,我们每秒执行一次 update 函数,计算当前时间与固定时间的时间差,并将时间差转换为秒数,然后将固定时间加上这个秒数,得到当前时间,最后将当前时间格式化成字符串,并更新页面上的时钟。