接着上一篇的操作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; }; }