简易在线投票系统(php)——前端设计（js部分）

1、交换显示两个div的方法

即将一个div的display属性设置为空的同时，将另一个div的display属性设置为none。注意，这两个属性不能再css文件中设置，而要在html页面设置，因为js只能读取和修改html页面的内容。

function showDiv(divName1,divName2){
	var divName1=document.getElementById(divName1);
	var divName2=document.getElementById(divName2);
	if(divName1.style.display=='none'){
		divName2.style.display='none';
		divName1.style.display='';
	}else{
		divName2.style.display='none';
		divName1.style.display='';
	}
}

2、让一个div隐藏的方法

我们需要在成功登陆或注册成功后自动隐藏登陆和注册框，而使用户正常的浏览页面

function exitDiv(divName){
	var divName=document.getElementById(divName);
	if(divName.style.display==''){
		divName.style.display='none';
	}else{
		divName.style.display='none';
	}
}

3、专门使用在发布投票页面的添加选项功能

发布者在输入选项数目后，点击确定，将自动生层相应数目的输入框。

//添加选项
function addVote(){
	var i=document.getElementById('voteCount').value;
	var addVote=document.getElementById('addVote');
	var newDiv=document.getElementById('newDiv');
	var div;
	if(i<1){
		i=1;
		document.getElementById('voteCount').value=1;
	}
	if(newDiv){
		newDiv.remove();
		div=document.createElement('div');
		div.id='newDiv';
	}else{
		div=document.createElement('div');
		div.id='newDiv';
	}
	var addHtml='<table>';
	for(var j=1;j<=i;j++){
		addHtml=addHtml+' <tr><td>  第'+j+'个选项</td><td>：<input type="text" name="'+j+'" size="20"/></td></tr>';
	}
	addHtml=addHtml+'</table>';
	div.innerHTML=addHtml;
	addVote.appendChild(div);
}

4、js中用来使页面发生跳转的方法

location.href='index.php'

5、页面引入js的位置技巧

（1）因为js是在页面加载的过程中运行的，所以需要在页面加载完成后再运行js文件，以防js在运行的过程中，找不到html中的代码。

（2）php的运行有一些需要调用js来实现，为了保证党php运行时，js也可以正常运行，要将必要的php代码放在js之后。

所以js文件的引用一般放在页面的末尾，同时将必要的php代码放在js之后。

<script language="javascript" type="text/javascript" src="./jsFunction.js"></script>
<?php
//在js之后用来调用js文件中的方法，使div变换
$ouser=@$_GET['user'];
if($ouser != ''){
	echo "<script>showDiv('top1','top2');</script>";
}
?>