JQuery编写的定时器实现时钟

使用定时器实现网页时钟

最新推荐文章于 2018-09-02 10:42:06 发布

原创最新推荐文章于 2018-09-02 10:42:06 发布 · 632 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #定时器 #时钟

前段Jquery 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一种利用HTML、CSS和JavaScript结合定时器功能实现在网页上显示实时更新的时间的方法。通过每秒更新一次页面上的时间元素，实现了动态显示当前时间的效果。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>定时器制作时钟</title>
<script type="text/javascript" src="Jquery/jquery.js"></script>
<script type="text/javascript" src="Jquery/jquery.timers-1.2.js"></script>
<style>
input[type="text"]{
font-family: "仿宋";
font-size: 132px;
color: #00FFFF;
opacity: 0.5;
border: none;
}
</style>
</head>
<body>
<input type="text" id="txtdt" value=""/>
<script>
$(document).ready(function() {
$('body').everyTime('1s', function() {
var d = new Date();
$("#txtdt").val(d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds() );
});
})
</script>
</body>
</html>

运行后的结果展示：