绩效考核系统开发心得之二__JavaScript

需要实现的功能：

1.动态变化

按照要求，网站有一个三个下拉框，其中前两个需要动态变化。

当改变“类别”的时候，“内容”要根据“类别”的不同而变化，显示出当前类别下的内容。

2.提示框

另外需要实现弹框提示的效果。

3.退出功能

点击“退出”，出现提示框选择是否退出。如果退出需定向index.html并清除cookie。

实现方式：

1.动态变化

简单的来说，想要让“内容”根据“类别变化”，有这么几个过程：

1.点选“类别”

2.清除原有的“内容”信息

3.根据类别生成新的“内容”信息。

实际上这个在Javascript里非常好实现，只需要一点代码就可以了。

清除原有信息可以这样来做：

 function Clear(oListBox) {
 	for (var i = oListBox.options.length - 1; i >= 0; i--) {
 		oListBox.remove(i);
 	}
 } 

利用oListBox对象自己的remove方法，删除第i个节点，利用options属性的length值得到循环的次数，逐个删除。

根据类别生成新的“内容”信息，可以用switch做，但是在操作的过程中发现switch好像有些不明白的问题，最后就用if/ else if 做了，比如这样：

function changeContent(obj, event) {
 	var type = document.getElementById("type");
 	var content = document.getElementById("content");
 	Clear(content);
	if(type.value==1)
	{
		content.options[content.options.length] = new Option("JCR一区论文", "1");
		content.options[content.options.length] = new Option("JCR二区论文", "2");
		content.options[content.options.length] = new Option("JCR三区论文", "3");
		content.options[content.options.length] = new Option("JCR四区论文", "4");
		content.options[content.options.length] = new Option("推荐列表中的国内期刊", "5");
		content.options[content.options.length] = new Option("第一档会议列表", "6");
		content.options[content.options.length] = new Option("第二档会议列表", "7");
		content.options[content.options.length] = new Option("第三档会议列表", "8");
		content.options[content.options.length] = new Option("其他", "9");
	}
	else if(type.value==2)
	{
		content.options[content.options.length] = new Option("软件著作权", "10");
		content.options[content.options.length] = new Option("专利", "11");
		content.options[content.options.length] = new Option("项目申请书", "12");
		content.options[content.options.length] = new Option("技术报告", "13");
	}
	else if(type.value==3)
	{
		content.options[content.options.length] = new Option("报销", "14");
		content.options[content.options.length] = new Option("接待", "15");
		content.options[content.options.length] = new Option("网站维护", "16");
		content.options[content.options.length] = new Option("活动组织", "17");
		content.options[content.options.length] = new Option("Paper Reading", "18");
		content.options[content.options.length] = new Option("Book Reading", "19");
	}
	else if(type.value==4)
	{
		content.options[content.options.length] = new Option("横向课题", "20");
		content.options[content.options.length] = new Option("原型系统", "21");
		content.options[content.options.length] = new Option("论文实验实现", "22");
	}


 }

这里用到

document.getElementById("type")

这个是Js中用来读取页面元素的一个途径，其中的type可以换成别的ID，对应页面中的各种元素，用这个函数可以得到这个ID对应项的内容

content.options[content.options.length] = new Option("JCR一区论文", "1")

这里是生成一个新的“内容”条目。

这样就可以实现动态变化的效果了。

2.提示框

应用之一就是修改密码页面，用户输入两次新密码，如果不同就要提示重新输入。

function check()
{
		var newpassword = document.getElementById("newPassword").value;
		var confirmpassword = document.getElementById("confirmPassword").value;
		
		if( newpassword != confirmpassword)
		{
			alert("确认密码不相同，请重新输入");
			window.location.href="studentInfoChange.html";
		}
}

这里的主角是alert，它会生成一个提示框，警告一些信息，点击确认之后，就会在Js里执行接下来的语句。也就是跳转。

3.退出功能

因为Cookies里存储了用户的ID信息，通过判断ID是否存在得知是否有用户在线，因此在退出的时候要清除Cookies。

特地从网上搜到了一个delCookie函数。

function logout()
{
	if (confirm("确定退出吗？"))
	{
		delCookie("ID");
		window.location.href="index.html";
	}
}

function delCookie(name)//为了删除指定名称的cookie，可以将其过期时间设定为一个过去的时间
{ 
	var date = new Date(); 
	date.setTime(date.getTime() - 10000); 
	document.cookie = name + "=a; expires=" + date.toGMTString(); 
}

之前搜到过很多种类型的delCookis函数，但有的能用有的不能用……囧，我现在还觉得那天的IE在抽风。

confirm();是个很有用的东西，相比alert，它有“确定”和“取消”的区别，这一点用在退出按钮上非常适合。

window.location.href="index.html";

这句代码执行了跳转命令，在这个命令之后页面会立刻跳转，后边的代码都不会被执行到。至于跳转的方式有很多种，我也说不全..需要的话可以在Google里搜到很多博客。

这里删除Cookie的办法是把Cookie的过期时间设置到过去，这样浏览器在检查Cookie的时候会发现已经过期而删除掉。

我觉得应该会有更直接粗暴的删除方式吧...这样曲线救国感觉效率较低。