jsp

位置:IT落伍者 >> jsp >> 浏览文章

JSP页面中的精确到秒的时间控件


发布日期:2020年10月27日
 
JSP页面中的精确到秒的时间控件

技术:Struts+jsp+MSql

需求:ncmgt网络监控系统中显示用户的操作日志并且根据操作时间查询用户的详细操作记录时间精确到秒

大致效果如下上图!

大家可以清晰的看到红色画线部分就是根据时间查询时间精确到秒不应该由用户手动输入不然会大大降低用户体验的性能这是就用到了时间控件就是这个小时钟一样的东西不过他只是一张图片而已我们要知道它后面所隐藏的东西先给大家展示一下效果吧当我们点击小时钟的时候弹出

这样的日历图片可以看见最下面一行是加上时分秒的默认是没有的哦

下面说一下怎么实现这个效果

第一步:

引入js文件

在JSP页面的头部

  1. <scriptlanguage="javascript"src="

第二步:

准备一张小图片

  1. <!文本框用来接收用户选中的时间并且传给form里的oplog实体类的属性>
  2. <inputtype="text"name="oplogSearchdateBegin"size=""value=""readonly="readonly"class="textarea">
  3. <ahref="javascript:buildCal(oplogListFormelements[oplogSearchdateBegin]true)">
  4. <imgid="IMG"src="请选择日期"width=""height=""border=""></a>

当用户选择了时间下面这个function就负责把时间放进文本框并提交表单

  1. functionclosewin(){
  2. //获取登录名和时间
  3. parentdocumentforms[""]elements["oplogSearchopname"]value
  4. =documentforms[""]elements["oplogSearchopname"]value;
  5. parentdocumentforms[""]elements["oplogSearchdateBegin"]value
  6. =documentforms[""]elements["oplogSearchdateBegin"]value;
  7. parentdocumentforms[""]elements["oplogSearchdateEnd"]value
  8. =documentforms[""]elements["oplogSearchdateEnd"]value;
  9. parentdocumentforms[""]submit();
  10. parentdocumentgetElementById(divWindow)styledisplay="none";


;

       
  • returnfalse;
  •    
  • }

并不是提交表单就大功告成了有一个处理是很重要的如果用户选择的时间是自日到就是我们常说的大于大的小于小

这是不符合逻辑的就像大于又小于的数字哪里有这样的呢?为了避免这样的值传到后台的Action再用户选择了时间之后我们应该做处理

  1. functioncomparePair(){
  2. varbeginend;
  3. begin=documentforms[""]elements["oplogSearchdateBegin"]value;
  4. end=documentforms[""]elements["oplogSearchdateEnd"]value;
  5. if(begin>end&&end!=""){
  6. alert("您选择的时间有误!);
  7. returnfalse;
  8. }
  9. returntrue;
  10. }

这样到后台就好处理了还有一点我用的MySql数据库在mySQL中处理时间是不能用to_date()的那是Oracle里的时间日期函数我们可以使用Dateformat();

例如

  1. selectcount(*)fromnc_op_logwhere=anddate<=DATE_FORMAT(
  2. ::YYYYMMDDHH:MI:SS)anddate>=DATE_FORMAT(::YYYYMMDDHH:MI:SS)

但如果你字段本身的类型就是Date类型的话什么函数都不需要就直接按字符串处理就可以查询到结果

例如

  1. selectcount(*)fromnc_op_logwhere=anddate>=::anddate<=::

               

上一篇:用JSP操作Cookie

下一篇:用JSP实现上传文件的两种方法