java简易计时器的实验总结,开发日常小结（14）：项目小功能：实现倒计时功能（js实现），基于java数据传递...

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.

距离自动解封时间还有4小时

解封

2.

//开启全局定时器

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);

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》