绩效考核系统开发心得之二__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的时候会发现已经过期而删除掉。

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












你可能感兴趣的:(Javascript,javascript,dreamweaver)