js实现动态时钟

最新推荐文章于 2023-11-28 16:32:14 发布

LMK_94

最新推荐文章于 2023-11-28 16:32:14 发布

阅读量1.4k

点赞数

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

本文链接：https://blog.csdn.net/qq_25281057/article/details/52422042

版权

JavaScript 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

网页的动态闹钟其实就是无刷新的动态，一般会用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);

效果图：

LMK_94

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js实现动态时钟

网页的动态闹钟其实就是无刷新的动态，一般会用Ajax技术实现，但这次就不用这种了，直接用js实现这个功能。html主要代码：当前时间： js代码实现原理其实就是利用了JavaScript中的定时器window.setTimeout(expression,milliseconds);window.setInterval(expression,milliseconds)。
复制链接

扫一扫