本文通过一个简易数码时钟示例，演示了 JavaScript 中 Date 对象的基本用法及 setInterval 定时器的应用。代码包含 HTML 结构、CSS 样式及核心 JS 逻辑，展示了如何获取年月日、时分秒并格式化输出，同时提及可通过图片替换文字实现更炫效果。
JavaScript 数码时钟实现概述
本文分享了一个使用 JavaScript 编写的简易数码时钟实现方案，供读者参考学习。
该示例旨在帮助读者复习 Date 对象的基本使用方法。此外，Date 对象还可用于构建定时器和计时器等功能。
最终运行效果如图所示：
在实际应用中，可以寻找更具视觉效果的图片来替代纯文字显示，其核心原理相同，仅需定时切换对应的图片即可实现动态效果。
HTML 结构、CSS 样式与 JS 逻辑
以下是实现该时钟所需的 HTML 代码部分：
<div id="clock">
<p></p>
<p></p>
<p></p>
</div>接下来是用于布局和美化的 CSS 代码：
*{margin:0;padding:0;}
#clock{width:300px;height:150px;position: relative;margin:50px auto;background: #eeeeee;cursor: default;}
#clock p{margin-top:5px;width:300px;height: 40px;text-align: center;
font:italic bold 36px/40px arial,sans-serif;letter-spacing: 3px;color:blueviolet;}核心逻辑由以下 JavaScript 代码实现：
window.onload = function ()
{
var oDiv = document.getElementById('clock');
var aP = oDiv.getElementsByTagName('p');
setInterval(clock,1000);
function clock()
{
var oDate = new Date(); //创建日期对象
var date = oDate.getFullYear()+'-'+ convert(oDate.getMonth()+1) +'-'+ convert(oDate.getDate());
var time = convert(oDate.getHours()) +':'+convert(oDate.getMinutes()) + ':' +convert(oDate.getSeconds());
aP[0].innerHTML = date;
aP[1].innerHTML = time;
aP[2].innerHTML = '星期' + convertWeek(oDate.getDay());
}
clock(); //加载完页面后立刻执行一次,不用等1秒后才显示
};
//把一位数字转换为两位字符串，补0
function convert(num)
{
return num < 9?'0'+num:''+num;
}
//把week转换为中文
function convertWeek(num)
{
return num==0?'日':num==1?'一':num==2?'二':num==3?'三':num==4?'四':num==5?'五':'六';
}如需更多 JavaScript 时钟特效，可点击查看相关专题内容。
以上就是本文的全部内容，希望能为各位的学习提供有益帮助，同时也欢迎大家继续支持本站。