jsp 运用ajax实现---时间倒计时且刷新不重置

来源：互联网发布：教美术的软件编辑：程序博客网时间：2024/05/29 07:49

首先，这个问题有三四中解决方案
可以使用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="<%=basePath%>">    <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访问服务器有时间延迟，服务器返回也有时间延迟，所以从前台到服务器在返回到前台，是有一定的延迟的，这方面以后在做完善。

这里写图片描述

阅读全文

1 0