jsp 运用ajax实现---时间倒计时且刷新不重置
2017-05-26 09:58
316 查看
首先,这个问题有三四中解决方案
可以使用cookie、缓存,window.name 等等实现,这里我先用window.name 实现呢,因为 window.name属性值,在刷新网页的时候是不会改变的,甚至页面加载了其他域名的页面也不会改变。
那window.name 是干什么用的呢?小白 从stackoverflow上摘了一段
首先是jsp代码
controller 代码
可以使用cookie、缓存,window.name 等等实现,这里我先用window.name 实现呢,因为 window.name属性值,在刷新网页的时候是不会改变的,甚至页面加载了其他域名的页面也不会改变。
那window.name 是干什么用的呢?小白 从stackoverflow上摘了一段
My understanding of it is that the window object is persistent throughout the lifetime of a tab, and represents the window that is loading different HTML documents. Each tab contains its own window object, which is why even when you navigate to/from different pages the window object is persistent, whereas if you check on a different tab the window.name will be different. When opening different html pages, most of them do not override the window.name property, and it is completely optional. If nothing else is manipulating it, it will be what you leave it as. Most pages only touch on manipulating the window.document itself.
我对此的理解是,窗口对象在选项卡的整个生命周期中是持久的,并且表示加载不同HTML文档的窗口。 每个选项卡包含自己的窗口对象,这就是为什么即使您浏览到/从不同的页面,窗口对象是持久的,而如果您检查不同的选项卡,window.name将是不同的。 当打开不同的html页面时,大多数页面不会覆盖window.name属性,它是完全可选的。 如果没有其他的东西在操纵它,它将是你留下的。 大多数页面只触摸操作window.document本身。
我的想法是 首先加载页面时,从服务器获取倒计时时间,在jsp页面做倒计时操作,如果发生页面刷新操作,就再次用ajax获取服务器时间,再回到jsp页面进行倒计时操作
首先是jsp代码
<head> <base href="<%=b 4000 asePath%>"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Title</title> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" > var maxtime,minutes,seconds,msg; if(window.name==''){ testCountDown(); } else{ // maxtime=window.name; testCountDown(); } function testCountDown() { $.ajax({ "method":"post", "url":"user/countdown.action" , "async": "false",//总感觉这里应该用同步,不该用异步。。。你们觉着呢 "data":{ } , "success":function (data) { if (data.seconds){ maxtime = data.seconds; }else { alert("kong"); } } }) } function CountDown(){ var div = $("#timer"); if(maxtime>=0){ minutes=Math.floor(maxtime/60); seconds=Math.floor(maxtime%60); msg="距离倒计时结束还有:"+minutes+"分"+seconds+"秒"; div[0].innerHTML=msg; if(maxtime==5*60){ alert('距离结束还是有五分钟'); } --maxtime; window.name=maxtime; } else{ clearInterval(timer); alert("倒计时已经结束了"); } } timer=setInterval("CountDown()",1000); </script> </head> <body> <div id="timer"></div> </body>
controller 代码
@RequestMapping(value = "/countdown",produces = {"application/json;charset=UTF-8"}) @ResponseBody public String countDownTime (){ SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"); Date date = null; try { date = format.parse("2017-05-26 12:50:12");//这里的时间自己去定义,应该是从数据库中取 } catch (Exception e) { e.printStackTrace(); } Date nowDate = new Date(System.currentTimeMillis()); long seconds = (date.getTime() - nowDate.getTime())/1000; Map<String,Float>map = new HashMap<String,Float>(); map.put("seconds",new Float(seconds)); try { return new ObjectMapper().writeValueAsString(map); } catch (Exception e){ e.printStackTrace(); } return null; }
但是这样写还是有些瑕疵,因为ajax访问服务器有时间延迟,服务器返回也有时间延迟,所以从前台到服务器在返回到前台,是有一定的延迟的,这方面以后在做完善。
相关文章推荐
- ajax实现jsp页面的动态刷新时间
- 运用 Ajax技术 实现一个局部刷新显示的小例子
- ajax+jsp提取数据库记录并实现自动刷新页面
- Ajax显示当前时间(实现页面局部刷新)
- jsp中使用Ajax实现页面无刷新
- 运用JSP+ajax实现分类查询功能
- jsp+servlet+ajax实现无刷新增删改查数据库
- jsp+ajax实现无刷新
- 使用Ajax和JSP实现无刷新的登录页面
- 在SSH框架下实现jsp页面的局部刷新(ajax)
- jsp+ajax实现无刷新(鼠标离开文本框即验证用户名)实现思路
- 在jsp中运用ajax实现同一界面不跳转处理事件
- jsp+ajax实现无刷新鼠标离开文本框即验证用户名
- vue2.0实现倒计时的插件(时间戳 刷新 跳转 都不影响)
- 用ajax、JSP和Servlet实现多级下拉菜单无刷新联动
- 十二、初学.NET—利用AJAX在页面头部显示服务器当前时间,并实现倒计时功能
- jsp+ajax实现的局部刷新较验验证码(onblur事件触发较验)
- jsp+ajax实现的局部刷新较验验证码(onblur事件触发较验)
- 运用JSP+ajax实现分类查询功能的实例代码
- 定时请求php 后台 AJAX 请求,在页面中倒计时,和显示刷新时间