打BOSS倒计时小程序之一个页面多个计时器并存

接着上一篇的操作xml，这一篇写多个计时器并存。

基本业务：点击某行的启动按钮时启动这行的计时器开始倒计时，点击停止时停止计时器停止倒计时。点击“一键启动”将启动勾选游戏的倒计时功能，点击“一键停止”将停止勾选游戏的倒计时。

多个计时器并存的思路是参考的这篇：http://www.cnblogs.com/Jerrycjc/p/4538048.html，以下直接上代码：

1、单个启动和停止：

/**
 * 点击“启动”按钮触发该事件，该事件用来开启倒计时功能
 * @param obj:启动按钮A标签
 * **/
function startInterval(obj){
	var $td = $(obj).parent();
	var $tr = $td.parent();
	var $intervalTd = $td.prev();
	var curID = $tr.attr("curID");
	var gameName = $tr.children().eq(gameNameIndex).text();
	
	//1、校验是否启动
	var isStart = $tr.attr("sign");
	//说明已经启动，那么不处理
	if(isStart!=null && isStart!=undefined && isStart=="1"){return false;}
	/*
	//1、校验该按钮是否禁用
	var isDisabled = $(obj).attr("disabled");
	if(isDisabled!=undefined && (isDisabled==true || isDisabled.toString()=="true")){return false;}
	*/
	
	//添加启动标识
	$tr.attr("sign","1");//1：已经启动 0-未启动
	
	//2、移除原有的倒计时样式
	$intervalTd.removeClass("cutDown");
	
	//3、获取倒计时
	editCutDownTime($td);//未倒计时框初始化值
//	var maxTime = parseInt($td.prev().prev().prev().text());//取间隔时间
	var maxTime = parseInt($td.prev().text());//取倒计时时间
	$intervalTd.text(maxTime);//倒计时初始化
	
	//4、设备按钮的状态
	//启动按钮置灰
	disableLink(obj);
	//停止按钮开始
	enableLink($(obj).next()[0]);
	
	//若一开始时间就比提醒时间短，那么需要进行提醒（临时间隔时间）
	if(maxTime<=parseInt(remindTime)){//说明少于提醒时间，那么需要进行提示
		//开启提示音
		playRemindInfo(curID,(gameName+"的大BOSS还有"+(maxTime>0?"还有"+maxTime+"分钟":"已经")+"分钟到达现场!"));
		//添加class
		$intervalTd.addClass("cutDown");
	}
	
	//???对倒计时框进行排序
	sortTable(cutDownIndex,false);
	
	//5、开始倒计时
	var timer = window.setInterval(function(){
		sortTable(cutDownIndex,false);
		if(maxTime>0){//说明倒计时还没有结束
			maxTime--;//减少一分钟
			//倒计时框减少一分钟
			$intervalTd.text(maxTime);
			//alert(maxTime+"\t"+(maxTime<=parseInt(remindTime)));
			if(maxTime<=parseInt(remindTime)){//说明少于提醒时间，那么需要进行提示
				//开启提示音
				playRemindInfo(curID,(gameName+"的大BOSS"+(maxTime>0?"还有"+maxTime+"分钟":"已经")+"到达现场!"));
				//添加class
				$intervalTd.addClass("cutDown");
			}
		}else{//说明倒计时时间为0或者小于0了，那么停止倒计时
			window.clearInterval(timer);
			endInterval($(obj).next()[0],1);//调用停止功能
		}
	},intervalTime);
	
	//6、将计时器存入到map中
	//alert("curID:"+curID+"\t"+timer);
	timerMap.put("curID"+curID,timer);
}

/**
 * 点击“停止”按钮触发该事件，该事件用来停止倒计时功能
 * @param obj:A标签
 * @param flag:1-不需要停止计时器（倒计时为0时自动停止计时器） 2-需要停止计时器
 * **/
function endInterval(obj,flag){
	var $this = $(obj);
	var $parent = $this.parent();
	
	//1、停止计时器
	if(parseInt(flag)!=1){//不为1，即停止计时器
		var curID = $parent.parent().attr("curID");
		var timer = timerMap.get("curID"+curID);
		//alert("计时器："+timer);
		window.clearInterval(timer);
	}
	
	//2、修改启动状态
	$parent.parent().attr("sign","0");//1：已经启动 0-停止
	
	//3、设备按钮的状态
	//启动按钮 开始
	enableLink($this.prev()[0]);
	//停止按钮置灰
	disableLink(obj);
}

 2、多个启动和停止：

/**
 * 点击“一键启动”按钮时触发该事件，该事件用来启动选定的记录
 * **/
function startTheSelected(){
	//1、校验勾选的数量
	var len = $("#"+tableName+">tbody>tr:gt(0)>td>input[type=checkbox]:checked").length;
	if(len<=0){alert("请先勾选要启动的游戏");return false;}
	
	//2、依次循环各个游戏，调用启动方法进行启动
	$("#"+tableName+">tbody>tr:gt(0)>td>input[type=checkbox]:checked").each(function(){
		//var $tr = $(this).parent().parent();
		startInterval($(this).parent().parent().children().eq(btnIndex).children().eq(startBtnIndex).get(0));//调用启动方法进行启动
	});
}

/**
 * 点击“一键停止”按钮时触发该事件，该事件用来停止选定的记录
 * **/
function endTheSelected(){
	//1、校验勾选的数量
	var len = $("#"+tableName+">tbody>tr:gt(0)>td>input[type=checkbox]:checked").length;
	if(len<=0){alert("请先勾选要停止的游戏");return false;}
	
	//2、依次循环各个游戏，调用停止方法进行停止
	$("#"+tableName+">tbody>tr:gt(0)>td>input[type=checkbox]:checked").each(function(){
		//3、校验“启动”按钮是否禁用，即倒计时是否启动，若启动了“启动”按钮是不可点击的
		var $a = $(this).parent().parent().children().eq(btnIndex).children().eq(startBtnIndex);//启动按钮所在a标签
		var isDisabled = $a.attr("disabled");
		if(isDisabled!=undefined && (isDisabled==true || isDisabled.toString()=="true")){//说明勾选的游戏正在启动中，可以停止
			endInterval($a.next().get(0),2);//调用启动方法进行启动:将停止按钮的对象传过去
		}
	});
}

3、禁用和启用A标签 ：

//禁用A标签的点击事件
function disableLink(link) {
	//link.disabled = true;   
	link.setAttribute("disabled",true); 
	link.removeAttribute('href');   
}
//启用A标签的点击事件
function enableLink(link) {
	link.setAttribute("disabled",false);   
	link.setAttribute("href","javascript:void(0);");   
}

4、Map的重写：

因为启动时将计时器存入到map里边了，这样停止的时候才知道停止的是哪个。

/* 
 * Map对象，实现Map功能 
 * 
 * 
 * size() 获取Map元素个数 
 * isEmpty() 判断Map是否为空 
 * clear() 删除Map所有元素 
 * put(key, value) 向Map中增加元素（key, value)  
 * remove(key) 删除指定key的元素，成功返回true，失败返回false 
 * get(key) 获取指定key的元素值value，失败返回null 
 * element(index) 获取指定索引的元素（使用element.key，element.value获取key和value），失败返回null 
 * containsKey(key) 判断Map中是否含有指定key的元素 
 * containsValue(value) 判断Map中是否含有指定value的元素 
 * keys() 获取Map中所有key的数组（array） 
 * values() 获取Map中所有value的数组（array） 
 */
function Map() {
	this.elements = new Array();

	//获取Map元素个数 
			this.size = function() {
				return this.elements.length;
			},

			//判断Map是否为空 
			this.isEmpty = function() {
				return (this.elements.length < 1);
			},

			//删除Map所有元素 
			this.clear = function() {
				this.elements = new Array();
			},

			//向Map中增加元素（key, value)  
			this.put = function(_key, _value) {
				if (this.containsKey(_key) == true) {
					if (this.remove(_key) == true) {
						this.elements.push( {
							key : _key,
							value : _value
						});
					}
				} else {
					this.elements.push( {
						key : _key,
						value : _value
					});
				}
			},

			//删除指定key的元素，成功返回true，失败返回false 
			this.remove = function(_key) {
				var bln = false;
				try {
					for (i = 0; i < this.elements.length; i++) {
						if (this.elements[i].key == _key) {
							this.elements.splice(i, 1);
							return true;
						}
					}
				} catch (e) {
					bln = false;
				}
				return bln;
			},

			//获取指定key的元素值value，失败返回null 
			this.get = function(_key) {
				try {
					for (i = 0; i < this.elements.length; i++) {
						if (this.elements[i].key == _key) {
							return this.elements[i].value;
						}
					}
				} catch (e) {
					return null;
				}
			},

			//获取指定索引的元素（使用element.key，element.value获取key和value），失败返回null 
			this.element = function(_index) {
				if (_index < 0 || _index >= this.elements.length) {
					return null;
				}
				return this.elements[_index];
			},

			//判断Map中是否含有指定key的元素 
			this.containsKey = function(_key) {
				var bln = false;
				try {
					for (i = 0; i < this.elements.length; i++) {
						if (this.elements[i].key == _key) {
							bln = true;
						}
					}
				} catch (e) {
					bln = false;
				}
				return bln;
			},

			//判断Map中是否含有指定value的元素 
			this.containsValue = function(_value) {
				var bln = false;
				try {
					for (i = 0; i < this.elements.length; i++) {
						if (this.elements[i].value == _value) {
							bln = true;
						}
					}
				} catch (e) {
					bln = false;
				}
				return bln;
			},

			//获取Map中所有key的数组（array） 
			this.keys = function() {
				var arr = new Array();
				for (i = 0; i < this.elements.length; i++) {
					arr.push(this.elements[i].key);
				}
				return arr;
			},

			//获取Map中所有value的数组（array） 
			this.values = function() {
				var arr = new Array();
				for (i = 0; i < this.elements.length; i++) {
					arr.push(this.elements[i].value);
				}
				return arr;
			};
}