前言:
/**
* 设计思路
* 当加载组件的时候调用该方法,并实现实时的时钟时间,有两种解决方案:
* 第一种:每一秒获取时间,并计算倒计时
* - 优点:准确
* - 缺点:实时调用API,性能消耗很大
*
* 第二种:获取一次时间之后,开启定时器,每一秒加上1s。
* - 优点:不用实时调用API,性能消耗不大
* - 缺点:有可能被其他进程抢夺,所以不太准确(如果系统负载较高或者有其他进程干扰定时器的精确度,可能会导致时间显示不准确。)
*/
第一种
通过实时获取当前时间来更新时间:
let date,hours,minutes,seconds;
function DateToHTML(){
console.log(parseInt(hours) + ":" + parseInt(minutes) + ":" + parseInt(seconds));
}
setInterval(function(){
date = new Date();
hours = date.getHours().toString().padStart(2, '0');
minutes = date.getMinutes().toString().padStart(2, '0');
seconds = date.getSeconds().toString().padStart(2, '0');
DateToHTML();
},1000)
第二种
获取一次时间之后就每一秒加上1s:
/**
* 设计思路
* 当加载组件的时候调用该方法,并实现实时的时钟时间。
* 采用第二种解决方案:获取一次时间之后,开启定时器,每一秒加上1s。
*/
// 定义一个对象来存储时间和定时器引用
const clock = {
totalSeconds: 0,
hours: null,
minutes: null,
seconds: null,
timerInterval: null
};
function initializeClock() {
// 获取初始时间
const today = new Date();
clock.hours = today.getHours().toString().padStart(2, '0');
clock.minutes = today.getMinutes().toString().padStart(2, '0');
clock.seconds = today.getSeconds().toString().padStart(2, '0');
clock.totalSeconds = today.getSeconds();
// 如果尚未设置定时器,则设置定时器
if (!clock.timerInterval) {
clock.timerInterval = setInterval(updateClock, 1000);
}
}
function updateClock() {
// 每秒增加1秒
clock.totalSeconds += 1;
clock.seconds = (clock.totalSeconds % 60).toString().padStart(2, '0');
// 每分钟重置秒数,增加1分钟
if (clock.totalSeconds >= 60) {
clock.totalSeconds -= 60;
clock.minutes = (clock.totalSeconds / 60).toString().padStart(2, '0');
}
// 每小时重置分钟和秒数,增加1小时
if (clock.totalSeconds >= 3600) {
clock.totalSeconds -= 3600;
clock.hours = (clock.totalSeconds / 3600).toString().padStart(2, '0');
}
// 输出时间到HTML元素
displayTime(clock.hours, clock.minutes, clock.seconds);
}
function displayTime(h, m, s) {
console.log(`${h}:${m}:${s}`);
}
// 初始化时钟显示
initializeClock();
更多内容: