开发日常小结（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. 

				<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》