js实现动态时钟

最新推荐文章于 2024-10-23 13:10:58 发布

LMK_94

最新推荐文章于 2024-10-23 13:10:58 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： JavaScript

本文链接：https://blog.youkuaiyun.com/qq_25281057/article/details/52422042

JavaScript 专栏收录该内容

0 篇文章

订阅专栏

本文介绍如何使用纯JavaScript创建一个实时更新显示当前时间的动态闹钟效果，不依赖Ajax，通过设置定时器每秒更新页面上的时间显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

网页的动态闹钟其实就是无刷新的动态，一般会用Ajax技术实现，但这次就不用这种了，直接用js实现这个功能。

html主要代码：

<body>
当前时间：<div id='myclock'></div> 
</body>

js代码实现原理其实就是利用了JavaScript中的定时器window.setTimeout(expression,milliseconds);window.setInterval(expression,milliseconds)。

编写一个获取当前时间并转换为规定格式的函数：

function date2str(date, y) {
var z = {
y: date.getFullYear(),
M: date.getMonth() + 1,
d: date.getDate(),
h: date.getHours(),
m: date.getMinutes(),
s: date.getSeconds()
};
return y.replace(/(y+|M+|d+|h+|m+|s+)/g, function(v) {
return ((v.length > 1 ? "0" : "") + eval('z.' + v.slice(-1))).slice(-(v.length > 2 ? v.length : 2))
});
}
//测试
window.alert(date2str(new Date(), "yyyy-MM-d h:m:s"));</span>

不断运行的定时器

function disptime(){
var dateStr=date2str(new Date(), "yyyy-MM-d h:m:s");
//window.alert(dateStr);
document.getElementById("myclock").innerHTML=dateStr ;
//放到函数来是为了不断进行调用
window.setTimeout("disptime()",1000);
}
//第一次调用
window.setTimeout("disptime()",1000);

效果图：