怎么在一个页面实现两个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()' />