JQuery实现网页上时间动态显示

来源：互联网发布：淘宝店招是什么意思编辑：程序博客网时间：2024/05/16 14:04

网页上实现时间显示，是JQuery中最简单的一个小功能。需要注意的是尽量不要使用递归调用，否则网页打开的时间一长就会造成内存泄露。

实现代码如下：

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<link type="text/css" rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){function timereset() {
var datetime = new Date();
var hour = datetime.getHours() < 10 ? "0 " + datetime.getHours() : datetime.getHours();
var min = datetime.getMinutes() < 10 ? "0" + datetime.getMinutes() : datetime.getMinutes();
var sec = datetime.getSeconds() < 10 ? "0" + datetime.getSeconds() : datetime.getSeconds();
var year = datetime.getFullYear();
var mon = datetime.getMonth() + 1 < 10 ? "0" + (datetime.getMonth() + 1) : datetime.getMonth() + 1;
var day = datetime.getDate() < 10 ? "0" + datetime.getDate() : datetime.getDate();
$("#time").html(hour + ":" + min + "<span class='second'> "+sec+"</span>");
$("#date").html(year + "年" + mon + "月" + day + "日");}
setInterval(timereset,1000);}
);
</script>
<title>登陆</title>
</head>
<body>

</body>
</html>

*PS：特别注意的是：自己不要忘记引用JQuery文件，否则JQuery方法没法调用；

0 0