最近两个月事儿比较多，也比较懒，不太想写东西。现在呢事儿还是很多，但是想写了——再不写就全忘啦，所以。。。
从这几天做的一个小程序开始写吧。
这个小程序主要是用来提醒人某个游戏还有多少时间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 +=""
+""+(i+1)+" "
+""+$(this).children("name").text()+" "
+""+$(this).children("interval").text()+" "
+"0 "
+""+$(this).children("interval").text()+" "
+""+appendOperateBtnHtml()+" "
+" ";
});
$("#"+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=""
+""+(parseInt(order)+1)+" "
+" "
+" "
+"保存 "
+"取消 "
+" ";
$("#"+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 els = bossesElement.selectNodes("//boss");//doc.selectNodes("//FILES")
if(els!=null && els.size()>0){//依次循环各个boss
for(int i=0;i0){
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 els = bossesElement.selectNodes("//boss");//doc.selectNodes("//FILES")
if(els!=null && els.size()>0){//依次循环各个boss
for(int i=0;i
最后祝大家好运！
