打BOSS倒计时小程序之操作xml文件

最近两个月事儿比较多，也比较懒，不太想写东西。现在呢事儿还是很多，但是想写了——再不写就全忘啦，所以。。。

从这几天做的一个小程序开始写吧。

这个小程序主要是用来提醒人某个游戏还有多少时间BOSS就要出来了赶紧去打（类似是这种倒计时的东西啦，具体是个什么鬼我也不知道，不玩游戏的人伤不起啊），用的servlet+html+js，为啥？因为要保存游戏数据，因为其他的语言都不熟悉啊，因为客户催的特别紧。只能这样子啦。

 

基本界面如下：

可写的功能有：操作xml文件、一个页面开多个计时器、在页面上将文字合成语音并播放出来、列表排序。

这里先来说操作xml。

操作xml比较简单，网上的例子也很多，这里直接粘下我自己的代码，别的就不多说了。

1、系统用到的全局变量声明：

/*********配置项开始***********************************************/
var intervalTime = 1*60*1000;//一分钟执行一次
var remindTime = 5;//提醒时间，默认为提前5分钟进行提醒
/*********配置项结束***********************************************/

var xmlhttp=null;
var tableName = "tableList";
var maxID = 0;//主键ID
var timerMap = new Map();//计时器数组

//各个td的下标
var orderIndex = 0;//序号所在td的下标
var checkboxIndex = 1;//复选框
var gameNameIndex = 2;//游戏名称
var intervalIndex = 3;//间隔
var tempIntervalIndex = 4;//临时间隔
var cutDownIndex = 5;//倒计时
var btnIndex = 6;//操作按钮

var startBtnIndex = 0;//开始按钮的下标
var endBtnIndex = 1;//停止按钮的下标
var deleteBtnIndex = 2;//删除按钮

var tableObj = null;//列表排序用的参数

//播报语音用的参数
var lan="zh";//lan=zh：语言是中文，如果改为lan=en，则语言是英文。
var ie = "UTF-8";//ie=UTF-8：文字格式。
var spd = 5;//spd=2：语速，可以是1-9的数字，数字越大，语速越快。
//text=**：这个就是你要转换的文字。
var url="http://tts.baidu.com/text2audio?lan="+lan+"&ie="+ie+"&spd="+spd+"&text=";

2、加载xml文件并显示到页面上：

$(function(){	
	//开始读取数据
	loadXML('data/data.xml');//读取到xml文件中的数据
});
//加载xml文档
var loadXML = function (xmlFile) {
    //获取xmlhttp对象
    if (window.ActiveXObject) {//IE浏览器
        xmlhttp = new ActiveXObject('Microsoft.XMLDOM');
    	//alert("IE浏览器");
	}else if(window.XMLHttpRequest){//谷歌，火狐，Opera等
	  	xmlhttp = new window.XMLHttpRequest();
	    //alert("其他浏览器:"+xmlhttp);
	}
	if(xmlhttp==null){
		alert("您的浏览器不支持XMLHttp，请更换其他浏览器，如谷歌、火狐")
		return false;
	}else{
		//alert("浏览器支持XMLHttpRequest");
		xmlhttp.open("GET",xmlFile,false);
	    xmlhttp.onreadystatechange = function(){
	    	//alert(xmlhttp.readyState+"\n"+xmlhttp.status);
	    	if (xmlhttp.readyState == 4 && (xmlhttp.status == 200 || xmlhttp.status == 304)) {  // 304未修改
		        //var xmlDoc = xmlhttp.responseXML.documentElement;
		        var xmlDoc = xmlhttp.responseXML;
//		        console.log("abc"+$(xmlDoc).length);
		        loadData(xmlDoc);//加载xml文件
		        return false;
		    }
	    };
	    //xmlhttp.onreadystatechange = loadData;
	    xmlhttp.send(null);
	}
}
//该方法用来加载xml数据
var loadData = function(xmlDoc){
	var $doc = $(xmlDoc);
    //table名称
	if($doc.find("tableName").length>0){
		$("#tableName").text($doc.find("tableName").text());
	}
	//提醒时间
	if($doc.find("remindTime").length>0){
		remindTime = parseInt($doc.find("remindTime").text());
	}
	
	setRemindTime();//修改提醒时间
	//加载游戏信息
	var html = "";
	var id = null;
	$(xmlDoc).find("bosses").children().each(function(i){
		id = parseInt($(this).children("id").text());
		if(id>maxID){maxID = parseInt(id);}
		html +="<tr curID=\""+id+"\">"
			 +"<td>"+(i+1)+"</td>"
			 +"<td><input type=\"checkbox\"/></td>"
			 +"<td onclick=\"editThisData(1,this);\">"+$(this).children("name").text()+"</td>"
			 +"<td onclick=\"editThisData(2,this);\">"+$(this).children("interval").text()+"</td>"
			 +"<td onclick=\"editTempInterval(this);\">0</td>"
			 +"<td>"+$(this).children("interval").text()+"</td>"
			 +"<td>"+appendOperateBtnHtml()+"</td>"
			 +"</tr>";
	});
	$("#"+tableName).append(html);
};

3、添加xml数据：

/**
 * 点击“添加行”按钮时触发该事件，该事件用来在table的最后添加一行
 */
function addRow(){
//	var order = $("#"+tableName+">tbody>tr").length;
	var order = $("#"+tableName+">tbody>tr:last>td:first").text();
	if(order==null || order==undefined || order.toString().length<=0){order = 0;}
	var html="<tr>"
			+"<td>"+(parseInt(order)+1)+"</td>"
			+"<td><input type=\"checkbox\"/></td>"
			+"<td><input type=\"text\" value=\"\"/></td>"
			+"<td><input type=\"text\" value=\"0\"/></td>"
			+"<td>&nbsp;</td>"
			+"<td>&nbsp;</td>"
			+"<td><a href=\"javascript:void(0);\" onclick=\"saveData(this);\">保存</a>&nbsp;&nbsp;"
			+"<a href=\"javascript:void(0);\" onclick=\"cancel(this);\">取消</a></td>"
			+"</tr>";
	$("#"+tableName).append(html);
}

/**
 * 点击“保存”按钮时触发该事件，该事件用来将游戏名称和间隔时间保存到xml文件中
 * @param obj:a标签本身(????游戏名称重名校验)
 */
function saveData(obj){
	var $tr = $(obj).parent().parent();
	//1、校验游戏名称，不能为空(????名称不能重复)
	var $nameTd = $tr.children().eq(gameNameIndex);//游戏名称
	var gameName = $nameTd.children().val();
	//alert("游戏名称："+gameName);
	gameName = jQuery.trim(gameName);
	if(gameName.toString().length<=0){
		alert("游戏名称不能为空");
		return false;
	}
	
	//2、校验间隔时间：不能为空，只能是数字
	var $intervalTd = $tr.children().eq(intervalIndex);
	var inteval = $intervalTd.children().val();
	//alert("间隔时间："+inteval);
	inteval = jQuery.trim(inteval);
	if(inteval.toString().length<=0){
		alert("间隔时间不能为空");
		$intervalTd.val(0);
		return false;
	}
	if(isNaN(inteval)){
		alert("间隔时间只能是数字");
		$intervalTd.val(0);
		return false;
	}
	/*大于间隔时间，不校验
	if(parseInt(inteval)<=remindTime){//间隔时间必须必提醒时间要长
		alert("间隔时间必须大于提醒时间");
		return false;
	}
	*/
	//3、提交数据
	$.ajax({
		type:"POST",
		async:false,
		data:{"sign":"1","id":(maxID+1),"name":gameName,"inteval":inteval,"time":new Date().getTime()},
		dataType:"text",
		url:"control",
		cache: false,
		error:function(XMLHttpRequest,textStatus,errorThrown){
			 alert(XMLHttpRequest.status+"\n"+XMLHttpRequest.readyState+"\n"+textStatus);
			 alert("加载错误，错误原因：\n"+errorThrown);
		},
		success:function(data){
			data = parseInt(data);
			switch(data){
				case 1:alert("添加失败，请稍后重试");break;
				case 2:alert("添加过程中出现异常，请查看日志或联系系统工作人员");break;
				case 3:{//添加成功
					//4、tr添加curID、maxID增1、两个文本框回复状态
					maxID++;
					$tr.attr("curID",maxID);
					$nameTd.html(gameName);//游戏名称
					$intervalTd.html(inteval);//间隔
					var $temp = $tr.children().eq(tempIntervalIndex);//临时间隔
					$temp.html("0");//临时间隔
					$tr.children().eq(cutDownIndex).html(inteval);//倒计时
					
					//为游戏名称和间隔时间、临时间隔时间td绑定click事件
					$nameTd.bind("click",function(){
						editThisData(1,this);
					});
					$intervalTd.bind("click",function(){
						editThisData(2,this);
					});
					$temp.bind("click",function(){
						editTempInterval(this);
					});
					
					//5、添加操作按钮
					$tr.children().eq(btnIndex).html(appendOperateBtnHtml());
				}
			}
		}
	});
}

保存按钮的后台处理：

/**
 * 该方法用来添加游戏信息
 * @param id:游戏id
 * @param name:游戏名称
 * @param interval:间隔时间
 * @param filePath:xml所在文件的目录
 * @return 1-失败 2-出现异常，可以通过日志文件查看哪里出现问题 3-成功
 * **/
public String addData(String id,String name,String interval,String filePath){
	String result = "1";
	try{
	    //读进内存
	    Document document = new SAXReader().read(filePath);
	    //根节点
	    Element root = document.getRootElement();
	    Element bossesElement = (Element)root.elements("bosses").get(0);
	 
	    
	    Element bossElement = bossesElement.addElement("boss");//创建boss
	    
	    Element idElement= bossElement.addElement("id");//id
	    idElement.setText(id);
	    
	    Element nameElement = bossElement.addElement("name");//游戏名称
	    nameElement.setText(name);
	    
	    Element intervalElement = bossElement.addElement("interval");//间隔时间
	    intervalElement.setText(interval);
	    
	    // 指定文本的写出的格式：
	    OutputFormat format = OutputFormat.createPrettyPrint();
	    format.setEncoding("UTF-8");
	    
	    XMLWriter writer = new XMLWriter(new FileOutputStream(filePath),format);
	    writer.write(document);
	    writer.close();
	    result="3";
	    utils.writeLoggerForInfo(logger, "往xml中写入数据", "主键序号："+id+",游戏名称："+name+",时间间隔："+interval, "添加结果："+result+"(1-添加失败 2-添加时出现异常 3-添加成功)");
	}catch(Exception e){
		e.printStackTrace();
		utils.writeLoggerForException(logger, "往xml中写入数据", "主键序号："+id+",游戏名称："+name+",时间间隔："+interval, e);
		return "2";
	}
	return result;
}

4、修改xml中的数据：

/**
 * 点击“游戏名称”、“间隔时间”、”table的名称“、“提醒时长”时触发该事件，该方法用来修改数据(????重名校验????校验)
 * @param flag:1-修改游戏名称 2-修改游戏间隔时间 3-修改table的名称 4-修改提醒时长
 * @param obj:td标签
 * **/
function editThisData(flag,obj){
	//若是点击的间隔时间，需要检验倒计时是否启动
	if(parseInt(flag)==2){
		var flag2 = btnIsDisabled(obj);
		if(flag2==1){
			alert("倒计时已经启动，不允许修改间隔时间");
			return false;
		}
	}
	
	//1、获取提醒信息
	var defaultValue = $(obj).text();//文本框的默认值，即所要修改的项目原本的值
	var remindMsg = "";//提示语，即当前要修改的是哪个项目
	var id = null;
	switch(flag+""){
		case "1":{id=$(obj).parent().attr("curID");remindMsg = "请输入游戏名称";break;}
		case "2":{id=$(obj).parent().attr("curID");remindMsg = "请输入游戏间隔（单位：分）";break;}
		case "3":{id="0";remindMsg = "请输入列表名称";break;}
		case "4":{id="0";defaultValue = remindTime; remindMsg = "请输入提前提醒时长（单位：分）";break;}
	}
	
	//2、获取要修改的数据
	var value = prompt(remindMsg,defaultValue);
	value = jQuery.trim(value);
	if(value.toString().length<=0){return false;}//为空不处理
	if(defaultValue==value){return false;}//若值没有修改那么不处理
	if((flag==2 || flag==4) && isNaN(value)){//为数字的不能输入非数字
		alert("输入值只能是数字，请重新修改数据");
		return false;
	}
	/*大于间隔时间，不校验
	if(flag==2 && parseInt(value)<=remindTime){//间隔时间必须比提醒时间要长
		alert("间隔时间必须大于提醒时间");
		return false;
	}
	*/
	//3、提交数据
	$.post("control",{"sign":3,"id":id,"value":value,"flag":flag,"time":new Date().getTime()},function(data){
		data = parseInt(data);
		switch(data){
			case 1:alert("修改失败，请稍后重试");break;
			case 2:alert("修改过程中出现异常，请查看日志或联系系统工作人员");break;
			case 3:{
				//提醒时间，调用方法进行修改，其他的直接修改text即可
				switch(flag+""){
				case "1":
				case "3":{$(obj).text(value);break;}
				case "2":{
					$(obj).text(value);//修改间隔时间
					editCutDownTime(obj);//修改倒计时时间
					break;
				}
				case "4":{
					remindTime = parseInt(value);//提醒时长赋值
					setRemindTime();//修改提醒时间的时长
					break;
				}
				}
			break;}
		}
	});
}

后台处理：

/**
 * 该方法用来修改游戏信息
 * @param id:游戏id
 * @param value:要修改的值
 * @param flag:1-修改游戏名称 2-修改游戏间隔时间 3-修改table的名称 4-修改提醒时长
 * @param filePath:xml所在文件的目录
 * @return 1-失败 2-出现异常，可以通过日志文件查看哪里出现问题 3-成功
 * **/
public String editData(String id,String value,int flag,String filePath){
	String result = "1";
	String params = "主键序号："+id+",修改值："+value+",flag:"+flag+"(1-修改游戏名称 2-修改游戏间隔时间 3-修改table的名称 4-修改提醒时长)";
	try{
	    //读进内存
	    Document document = new SAXReader().read(filePath);
	    //根节点
	    Element root = document.getRootElement();
	    Element targetElement = null;
	    switch(flag){
		    //修改游戏名称
		    case 1:{targetElement = getTargetElement(root,id,"name");break;}
		    
		    //修改游戏间隔时间
		    case 2:{targetElement = getTargetElement(root,id,"interval");break;}
		    
		    //修改table的名称
		    case 3:{targetElement = (Element)root.elements("tableName").get(0);break;}
		    
		    //修改提醒时长
		    case 4:{targetElement = (Element)root.elements("remindTime").get(0);break;}
	    }
	    if(targetElement!=null){
		//赋值
		    targetElement.setText(value);
		    
		    // 指定文本的写出的格式：
		    OutputFormat format = OutputFormat.createPrettyPrint();
		    format.setEncoding("UTF-8");
		    
		    XMLWriter writer = new XMLWriter(new FileOutputStream(filePath),format);
		    writer.write(document);
		    writer.close();
		    result="3";
		    utils.writeLoggerForInfo(logger, "修改xml中的数据", params, "修改结果："+result+"(1-修改失败 2-修改时出现异常 3-修改成功)");
	    }else{
		result = "1";
		utils.writeLoggerForInfo(logger, "修改xml中的数据", params, "修改结果：修改失败，没有找到目标元素，可能xml文件中没有id为"+id+"的boss元素，请检查xml文件格式是否正确");
	    }
	}catch(Exception e){
		e.printStackTrace();
		utils.writeLoggerForException(logger, "修改xml中的数据", params, e);
		return "2";
	}
	return result;
}

/**
 * 该方法用来获取指定target
 * @param root：xml文档的跟节点
 * @param id:boss的id号，用来匹配boss
 * @param elementName:要查找的boss下的标签名称
 * @return targetElement:目标元素，若没有找到，返回null
 * **/
private Element getTargetElement(Element root,String id,String elementName){
	Element targetElement = null;
	try{
		Element bossesElement = (Element)root.elements("bosses").get(0);
	    
	    Element element = null;
	    Element idElement = null;
	    List<Element> els = bossesElement.selectNodes("//boss");//doc.selectNodes("//FILES")
	    if(els!=null && els.size()>0){//依次循环各个boss
		for(int i=0;i<els.size();i++){
			element = els.get(i);//每个boss标签
			idElement = (Element)element.elements("id").get(0);
			if(idElement!=null && idElement.getText().trim().equals(id)){//说明两个id相同，那么要修改这个节点
				if(elementName!=null && elementName.trim().length()>0){
					targetElement = (Element)element.elements(elementName).get(0);
				}else{
					targetElement = element;//若是没有指定要找boss下的哪个元素，那么返回boss元素
				}
				break;
			}
		}
	    }
	}catch(Exception e){
		targetElement = null;
		utils.writeLoggerForException(logger, "获取目标节点", "id:"+id+",要查找的节点："+elementName+"(若为null表示删除元素，应返回boss元素)", e);
		e.printStackTrace();
	}
    return targetElement;
}

5、删除xml中的数据：

/**
 * 点击“删除行”时触发该事件，该事件用来删除指定的游戏
 * @param obj:A标签
 * */
function deleteThisRow(obj){
	var $tr = $(obj).parent().parent();
	var curID = $tr.attr("curID");
	var gameName = $tr.children().eq(gameNameIndex).text();//游戏名称
	if(confirm("确认删除\t"+gameName+"\t?")){
		$.post("control",{"sign":2,"id":curID,"time":new Date().getTime()},function(data){
			data = parseInt(data);
			switch(data){
				case 1:alert("删除失败，请稍后重试");break;
				case 2:alert("删除过程中出现异常，请查看日志或联系系统工作人员");break;
				case 3:{
					$tr.remove();
					if(timerMap.containsKey("curID"+curID)==true){
						timerMap.remove("curID"+curID);
					}
					break;
				}
			}
		});
	}
}

后台处理：

/**
 * 该方法用来删除游戏信息
 * @param id:游戏id
 * @param filePath:xml所在文件的目录
 * @return 1-失败 2-出现异常，可以通过日志文件查看哪里出现问题 3-成功
 * **/
public String deleteData(String id,String filePath){
	String result = "1";
	try{
	    //读进内存
	    Document document = new SAXReader().read(filePath);
	    //根节点
	    Element root = document.getRootElement();
	    /*
	    Element bossesElement = (Element)root.elements("bosses").get(0);
	    
	    Element element = null;
	    Node idNode = null;
	    List<Element> els = bossesElement.selectNodes("//boss");//doc.selectNodes("//FILES")
	    if(els!=null && els.size()>0){//依次循环各个boss
		for(int i=0;i<els.size();i++){
			element = els.get(i);//每个boss标签
			idNode = element.selectSingleNode(".//id");
			if(idNode!=null && idNode.getText().trim().equals(id)){//说明两个id相同，那么删除这个节点
				element.getParent().remove(element);//boss标签的上一级移除boss标签
				break;//查找到之后就结束循环
			}
		}
	    }
	    */
	    Element targetElement = getTargetElement(root,id,null);
	    if(targetElement!=null){//说明找到元素了
		targetElement.getParent().remove(targetElement);
		 // 指定文本的写出的格式：
		    OutputFormat format = OutputFormat.createPrettyPrint();
		    format.setEncoding("UTF-8");
		    
		    XMLWriter writer = new XMLWriter(new FileOutputStream(filePath),format);
		    writer.write(document);
		    writer.close();
		    result="3";
		    utils.writeLoggerForInfo(logger, "删除xml中的数据", "主键序号："+id, "删除结果："+result+"(1-删除失败 2-删除时出现异常 3-删除成功)");
	    }else{
		result = "1";
		utils.writeLoggerForInfo(logger, "删除xml中的数据", "主键序号："+id, "删除结果：删除失败，没有找到目标元素，可能xml文件中没有id为"+id+"的boss元素，请检查xml文件格式是否正确");
	    }
	}catch(Exception e){
		e.printStackTrace();
		utils.writeLoggerForException(logger, "删除xml中的数据", "主键序号："+id, e);
		return "2";
	}
	return result;
}

 最后祝大家好运！