您的位置：首页 > 其它

在页面显示日期和当前时间，可以读秒

2016-08-26 21:14 253 查看

需要写一个自定义的插件（jquery-timer-1.0.js）

/**
* jQuery日期插件
* 匿名函数
*/
(function($) {
/** 为jQuery添加对象的方法 */
$.prototype.test1=function(){
this.html("dddd");
}
/** 为jQuery批量添加对象的方法 */
$.fn.extend({
runtime:function(){
/** 创建日期对象 */
var d = new Date();
/** 定义数组封装数据 */
var arr = new Array();
/** 获取年*/
arr.push(d.getFullYear()+"年");
/** 获取月0-11月*/
arr.push($.calc(d.getMonth()+1)+"月");
/** 获取日*/
arr.push($.calc(d.getDate())+"日");
/** 获取星期0-6，要用数组来封装，通过角标来判断星期几*/
var week =$.weeks[d.getDay()];
arr.push(" "+week+" ");
/** 获取小时*/
arr.push($.calc(d.getHours())+":");
/** 获取分钟*/
arr.push($.calc(d.getMinutes())+":");
/** 获取秒*/
arr.push($.calc(d.getSeconds()));

this.html(arr.join(""));
var t =this
/** 开启定时器*/
setTimeout(function() {
t.runtime();
}, 1000);
},

});
/** 为jQuery添加静态的方法*/
$.extend({
weeks:["星期日","星期一","星期二","星期三","星期四","星期五","星期六"],
calc :function(str){
return str>9?str:"0"+str;
}
});
})(jQuery);

写一个jsp页面，在页面中要引入自定义的插件

<%@ page language="java" contentType="text/html;charset=utf-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>办公管理系统</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="pragma" content="no-cache"/>
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate"/>
<meta name="Keywords" content="keyword1,keyword2,keyword3"/>
<meta name="Description" content="网页信息的描述" />
<meta name="Author" content="gdcct.gov.cn" />
<meta name="Copyright" content="All Rights Reserved." />
<link href="${path }/logo.ico" rel="shortcut icon" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="${path}/css/common/global.css"/>
<script type="text/javascript" src="${path}/js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="${path}/js/jquery-migrate-1.2.1.min.js"></script>
<span style="background-color: rgb(255, 0, 0);"><script type="text/javascript" src="${path}/js/jquery-timer-1.0.js"></script>引入插件</span>
<script type="text/javascript">
/**当html页面被浏览器加载完 */
$(document).ready(function() {
/**显示当前系统运行的时间 */
$("#time").runtime();
/** 按点击图标次数绑定事件*/
$("#ShowNav").toggle(
function() {
/** 获取父窗口的frameset（Id为tstMain）*/
var tst =$("#tstMain",parent.document);
$("#headtitle").hide();
tst.attr("rows","12,*");
/** 更改图标*/
$(this).attr("src","${path}/images/system/top_yc.gif");
$("#nav_title").attr("title","显示菜单栏");
},
function(){
/** 获取父窗口的frameset（Id为tstMain）*/
var tst =$("#tstMain",parent.document);
$("#headtitle").show();
tst.attr("rows","82,*");
/** 更改图标*/
$(this).attr("src","${path}/images/system/top_xs.gif");
$("#nav_title").attr("title","隐藏菜单栏");
});
});
</script>
</head>

<body class="headbody">
<div class="headtitle" id="headtitle">
<div class="headlogo"><img src="${path}/images/system/logo.gif" />
</div>
<div class="headmenutop">

<a class="headtopout" title="退出系统" href="javascript:void(0);" onclick="exit();">安全退出</a>
<a class="headtopout" title="密码修改" href="javascript:void(0);" onclick="password();">密码修改</a>
<div class="titlexx">
<span style="font-size:14px;">${session_user.name } 您好，</span>
<span id="time" style="color:#fff;font-size:14px;"></span>

</div>
</div>
</div>
<div class="yctopdiv">
<a href="javascript:void(0);" class="t_link" title="隐藏菜单栏" id="nav_title">
<img src="${path}/images/system/top_yc.gif" id="ShowNav"/>
</a>
</div>
</body>
</html>

写完即可运行测试

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 插件函数网页显示当前时间

相关文章推荐

新的分享

章节导航