2018年5月13日17:26:50
【1】前言
运营部姐姐发来一个留言:加个倒计时吧,这样看着舒服。然后,我就开始重新看模块的相关代码了(了解数据流的传递过程,是非常重要的)。经过努力,还是解决了这个问题,如下图所示:
【2】原理
开发必须注重效率,因此要明确需求:
1)假如查询的玩家没有封号,那就不需要倒计时了;
2)假如查询的玩家被封号了,那就要获取封禁开始时间、封禁所需时间和当前时间了,然后就是js的特效展示;
3)做了倒计时功能还不算结束,因为还要考虑到如下3个问题:
3.1 倒计时正常结束时,需要自动解封功能的;
3.2 倒计时还没结束,运营部姐姐点击了解封(强制结束禁封状态),那就需要对倒计时做些动作了;
3.3 倒计时有了,假如新开了一个标签页,然后对玩家操作,会不会有并发风险??
【3】后端的数据获取(当前倒计时的初值)
忽略掉数据库和企业框架,下面是一段java代码:
//玩家的是否被封禁的信息 BlackWhiteListInfo blackWhiteListInfo = blackWhiteListData.getBlackRoleInfo(roleId); if(null != blackWhiteListInfo && blackWhiteListInfo.getIsBlockNow()){ json.element("isBlockNow", true); //int leftHours = (int)(blackWhiteListInfo.getExpireTime() - (System.currentTimeMillis() - blackWhiteListInfo.getBlockTime().getTime())/60/60/1000); long leftSeconds = (long)(blackWhiteListInfo.getExpireTime()*3600 - (System.currentTimeMillis() - blackWhiteListInfo.getBlockTime().getTime())/1000); json.element("leftAccountReleaseHour", leftSeconds/3600); json.element("leftAccountReleaseMinute", (leftSeconds%3600)/60); json.element("leftAccountReleaseSecond", (leftSeconds%3600)%60); json.element("expireTime", blackWhiteListInfo.getExpireTime()); }else{ json.element("isBlockNow", false); json.element("leftAccountReleaseTime", 0); json.element("expireTime", -1); }
这里使用了json封装好 leftAccountReleaseHour、leftAccountReleaseMinute、leftAccountReleaseSecond;然后通过request请求,发送给前端页面,这里不做过多讲解;
【4】js实现页面倒计时
大部分的jsp页面获取值,都是用json,这里也不例外;下面是倒计时的相关代码:
1.
<div id="unBlockAccount" class="form-horizontal" id="unBlockAccount"> <label class="text text-center center-block" id="accountDesc"> 距离自动解封时间还有4小时 </label> <button id="unBlockAccountBtn" type="submit" class="btn btn-primary center-block">解封</button> </div>
2.
<script type="text/javascript"> //开启全局定时器 var hour = -1;//倒计时 var minute = -1; var second = -1; var state = -1; //0:禁封状态;1:解禁状态或永久禁封 var intDiff = parseInt(60); var timer = window.setInterval(function(){ if(state == 0){ if(intDiff > 0){ //禁封状态 if(second == 0){ if(minute > 0){ second = 60; minute --; }else if(minute == 0){ if(hour > 0){ second = 60; minute = 59; hour --; }else if(hour == 0){ //alert("自动解封!!"); state = 1; $("#unBlockAccountBtn").click(); $("#search-btn").click(); } } } second--; //console.log("test "+hour+":"+minute+":"+second+" state: "+state); $("#accountDesc").html("距离自动解封时间还有"+hour+" 小时 "+minute+" 分钟 "+second+" 秒 "); }else if(intDiff == 0){ intDiff = 60; } intDiff--; } }, 1000);
</script>
3.
$("#forbiddenCount").html("历史被封次数: "+data.forbiddenCount+"次"); //判断玩家是已封号还是未被封号 if(data.isBlockNow){ //已经被封号 $("#blockAccount").hide(); $("#unBlockAccount").show(); if(data.expireTime == -1){ $("#accountDesc").html("此账号永久封号,可手动解封"); }else{ hour = data.leftAccountReleaseHour; minute = data.leftAccountReleaseMinute; second = data.leftAccountReleaseSecond; state = 0; } }else{ //未被封号 $("#blockAccount").show(); $("#unBlockAccount").hide(); }
解释:
1、是页面布局控件;
2、倒计时使用的是:window.setInterval(),赋值给一个全局变量;
3、每当刷新页面时,获取json的值,赋值给全局变量(hour、minute和second),并设置状态位;这样每1000ms循环执行一次操作;然后实现倒计时的效果。
4、如果有解封,那么对state变量设置一下即可;定时器是不断地在跑的;
参考:《http://www.jq22.com/jquery-info327》