简易在线投票系统(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>";
}
?>