您的位置:首页 > Web前端 > JavaScript

javascript第二课练习

2014-07-28 22:27 190 查看
<script type="text/javascript">
window.onload=function() //网页全部加载完后执行
{
var aDiv=document.getElementById('div1'); //获取ID
aDiv.onmouseover=zx; //当鼠标停留在div上执行此函数
};
function zx()
{
alert("测试OK");
}
</script>

<div id="div1">1231223</div>

/*-------------------------------------------*/

<script type="text/javascript"> window.onload=function() { var aDiv=document.getElementById("div1"); //获取DIV1,并给它命名 var aXc=document.getElementById('xc'); //获取xc,并给它命名 aDiv.onclick=function() //鼠标点击时时执行此函数 { if(aXc.style.display=="none") //如果是隐藏,将它显示,如果是显示,将它隐藏 { aXc.style.display="block"; } else { aXc.style.display="none" } } } </script>

<div id="div1">点击展开或者隐藏</div> <ul style="display:none;" id="xc"> <li>1</li> <li>2</li> <li>3</li> </ul>

/*-------------------------------------------*/

<script type="text/javascript"> window.onload=function() { var aDiv=document.getElementById("div1"); var ipt=document.getElementsByTagName('input'); aDiv.onclick=function() { // alert(aInput.length) //一共有多少个复选框 for(i=0;i<=ipt.length;i++) { ipt[i].checked=true; //循环全部为选中状态 } } } </script> <div id="div1">全选负选框</div> <input type='checkbox'/><br/> <input type='checkbox'/><br/>

/*-------------------------------------------*/

<style type="text/css"> input { background:#FFF; color:#FF0000; width:45px; height:35px; } .active { background:#000; color:#FFF; } </style> <script type="text/javascript"> window.onload=function() { var but=document.getElementsByTagName('input'); //获取页面中的input var i=0; for(i=0;i<but.length;i++) //循环下标,点击时候执行函数 { but[i].index=i; //找出他的索引下标

but[i].onclick=function() { for(i=0;i<but.length;i++) { but[i].className=""; //这个循环是为了把每个input 的 class为空掉! adiv[i].style.display="none"; //循环把所有的div都隐藏掉

} adiv[this.index].style.display="block"; //找到相对应的下标并显示

this.className='active'; //完了吧当前的重新赋于class } } } </script> <input class="active" type='button' value="1"> //默认第一个有class <input type='button' value="2"> <input type='button' value="3"><div style="display:block">111</div> //第一个默认为显示 <div>222</div> <div>333</div>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: