JavaScript 实现页面时钟实时刷新与点击暂停
通过 JavaScript 结合 Date 对象与定时器技术，在不刷新页面的前提下实现客户端时间的实时显示，并赋予用户点击控制暂停或继续的功能，适用于各类需要动态时间展示的 Web 场景。
获取并格式化当前时间
要在页面中展示格式化的时间（如“2023年1月1日星期一 10:10:10”），首先需要利用 Date 对象获取系统的各项时间数据。为了代码结构清晰，建议将时间数据封装为一个对象进行统一管理。
var nowDate = new Date();
var time = {
year: nowDate.getFullYear(),
month: nowDate.getMonth() + 1, // 注意：getMonth() 返回的是 0-11，需 +1
day: nowDate.getDate(),
week: nowDate.getDay(),
hour: nowDate.getHours(),
minute: nowDate.getMinutes(),
second: nowDate.getSeconds()
};获取原始数据后，主要处理两个问题：一是星期的数字转文字，二是补零操作（即分钟和秒小于 10 时前面加 0）。
第1步：编写星期转换函数
getDay() 返回 0-6 的整数，通常 1 代表周一。使用 switch-case 结构将其转换为中文星期名称最为直观。
function getWeekText(num) {
switch (num) {
case 1: return '星期一'; break;
case 2: return '星期二'; break;
case 3: return '星期三'; break;
case 4: return '星期四'; break;
case 5: return '星期五'; break;
case 6: return '星期六'; break;
case 7: return '星期日'; break;
default: return '';
}
}第2步：编写双位数补零函数
当分钟或秒数为个位数时，直接拼接会导致格式不统一（如显示 “10:5:1”）。我们需要一个辅助函数确保其始终占两位。
function formatTwoDigits(num) {
return num < 10 ? '0' + num : num;
}整合时间输出逻辑
将上述工具函数整合到一个核心函数 updateClock 中，该函数接收 DOM 元素作为参数，负责计算并渲染时间字符串。
function updateClock(obj) {
var nowDate = new Date();
// 实际开发中可复用上面的 time 对象或直接内联获取，为简洁起见此处展示完整逻辑
var h = nowDate.getHours();
var m = formatTwoDigits(nowDate.getMinutes());
var s = formatTwoDigits(nowDate.getSeconds());
var w = getWeekText(nowDate.getDay());
obj.innerHTML = `${nowDate.getFullYear()}年${nowDate.getMonth()+1}月${nowDate.getDate()}日 ${w} ${h}:${m}:${s}`;
}实现自动更新与点击暂停
要实现时间在页面上自动跳动，必须使用 JavaScript 定时器。这里推荐使用 setInterval，因为它会按指定间隔反复执行任务。
第3步：启用定时器实现实时刷新
创建一个容器并在外部引入脚本，初始化后立即调用一次以消除首次延迟的视觉差异，随后启动循环定时器。
<!-- HTML 结构 -->
<div id="clock-box" style="font-size: 20px; cursor: pointer;></div>
<script>
var box = document.getElementById('clock-box');
var isRunning = true; // 标记当前状态
// 初始执行一次
updateClock(box);
// 每1000毫秒执行一次
box.timerID = setInterval(function() {
if(isRunning) {
updateClock(box);
}
}, 1000);
</script>第4步：添加点击交互控制
最后，为容器绑定点击事件。利用布尔值 isRunning 作为开关，切换 clearInterval（停止计时器）和保留运行状态的逻辑。
box.onclick = function() {
if (isRunning) {
clearInterval(box.timerID); // 清除定时器，时间不再变化
isRunning = false;
} else {
// 重新建立定时器，继续走时
box.timerID = setInterval(updateClock, 1000);
isRunning = true;
}
};
</script>总结
本示例通过组合 Date 对象的属性提取、三元运算补零以及 setInterval 循环机制，实现了轻量级的网页时钟功能。关键在于理解定时器的生命周期管理以及如何通过简单的状态变量控制 UI 的动态行为。以上就是在页面中输出当前客户端时间 javascript 实例代码的详细内容，更多关于 JavaScript 定时器应用的资料请关注本站其它相关文章！
免责声明：本文内容仅供参考，不代表本站观点。转载或引用请注明出处。
