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

最新推荐文章于 2024-08-19 18:25:53 发布

jeo_chow

最新推荐文章于 2024-08-19 18:25:53 发布

阅读量3.1k

点赞数

分类专栏：项目（ssh）--OA办公系统文章标签：插件函数网页显示当前时间

本文链接：https://blog.csdn.net/jeo_chow/article/details/52331739

版权

项目（ssh）--OA办公系统专栏收录该内容

9 篇文章 0 订阅

订阅专栏

需要写一个自定义的插件（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);" οnclick="exit();">安全退出</a>
        	<a class="headtopout" title="密码修改" href="javascript:void(0);" οnclick="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"/>
		<!--隐藏时反显示的图片<img src="images/system/top_xs.gif" />--></a>
    </div>
  </body>
</html>

写完即可运行测试