怎么在一个页面实现两个js效果？

Question

以下是两个简单的js效果，在一个页面调用其中一个js都没问题，但是两个就失效了

昨天才开始学的js，求大家帮帮忙

window.onload=function(){

var oDiv=document.getElementById('header_center');

var oNat=document.getElementById('header_center_div');

var oLi=oNat.getElementsByTagName('li');

var oTxt=oNat.getElementsByTagName('div');

for(var i=0;i<oLi.length;i++)

{

oLi[i].index=i;

oLi[i].onmouseover=function()

{

for(var i=0;i<oLi.length;i++)

{

oLi[i].className='';

oTxt[i].style.display='none';

}

this.className='active';

oTxt[this.index].style.display='block';

};

}

oDiv.onmouseover=function()

{

oNat.style.display='block';

}

oDiv.onmouseout=function()

{

oNat.style.display='none';

}

}

//以上是其中一个js效果

----------------------------------------------------------------------------

window.onload=function ()

{

var oDi=document.getElementById('reg_right');

var oL=oDi.getElementsByTagName('li');

var oTx=oDi.getElementsByTagName('div');

for(var a=0;a<oL.length;a++)

{

oL[a].index=a;

oL[a].onmouseover=function()

{

for(var a=0;a<oL.length;a++)

{

oL[a].className='';

oTx[a].style.display='none';

}

this.className='reg1';

oTx[this.index].style.display='block';

}

}

}

//以上是第二个

-----------------------------------------------------------------

以下HTML代码（是链接上面两个的第二个js）

<div class="center"></div>

<div id="reg_right">

<ul>

<li class="reg1">用户名注册</li>

<li>邮箱注册</li>

</ul>

<div style="display:block;">

<form method="post" style="float: right;">

&nbsp;用户名：<input type="text" name="name"><br />

登陆密码：<input type="text" name="name" ><br />

重复密码：<input type="text" name="name" >

</form>

</div>

<div class="reg_text2">

<form method="post" style="float: right;">

&nbsp;邮箱：<input type="text" name="name"><br />

登陆密码：<input type="text" name="name" ><br />

重复密码：<input type="text" name="name" >

</form>

</div>

</div>

--------------------------------------------

以下链接第一个js

<div id="header_center">

天行导航

<div id="header_center_div">

<ul>

<li class="active"><b>选车</b></li>

<li><b>买车</b></li>

<li><b>用车</b></li>

<form method="post">

<input type="text" id="a" name="a" >

<input type="submit" id="b" name="b" value="搜索">

</form>

</ul>

<div style="display:block;" class="text">

<span>热门车型</span>

<img src="image/01.jpg">

<img src="image/02.jpg">

<img src="image/03.jpg">

<img src="image/04.jpg">

</div>

<div class="text">

<table class="text1">

<b>价位</b>

<tr>

<td>5万以下</td>

<td>5-8万</td>

<td>8-12万</td>

<td>12-18万</td>

<td>18-25万</td>

<td>25-35万</td>

<td>35-50万</td>

<td>50-70万</td>

</tr>

</table>

<b>品牌</b>

<table class="text2">

<tr>

<td>福特</td>

<td>宝马</td>

<td>比亚迪</td>

<td>奔驰</td>

<td>马自达</td>

</tr>

</table>

</div>

<div class="text3">

<a href="" class="a1">油价变动</a><br /><br />

<a href="" class="a2">驾车技巧</a><br /><br />

<a href="" class="a3">汽车音响</a>

<a href="" class="a4">保养的故事</a>

<a href="" class="a5">改装DIY</a><br />

<a href="" class="a6">用车小窍门</a>

<a href="" class="a7">汽车音乐与电影</a>

<a href="" class="a8">女性用车</a>

<a href="" class="a9">舒适驾驶</a>

<a href="" class="a10">轮胎测试</a>

</div>

</div>

</div>

Answer 1

你可以定义单独的方法，去实现对应的事件，下面的代码你可以参考一下：<script type='text/javascript'>    function keydown_action(){        alert('按下按键');    }    function mouseout_action(){        alert('鼠标移出输入框');    }    function keyup_action(){        alert('释放按键');    }</script><input onkeydown='keydown_action()' onkeypress='mouseout_action()' onkeyup='keyup_action()' />