JS
鉴于之前我自己的JS学的不好 这周木也是在一点一点的补漏
1 全反 全选 不选
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script> window.onload=function(){ var b1=document.getElementById('btn1'); var b2=document.getElementById('btn2'); var b3=document.getElementById('btn3');
var dd1=document.getElementById('d1'); var int=document.getElementsByTagName('input');
b1.onclick=function(){ for(i=0;i<int.length;i++) { int[i].checked = true; } }; b2.onclick=function(){ for(i=0;i<int.length;i++){ int[i].checked=false; } };
b3.onclick=function(){ for(i=0;i<int.length;i++){ if(int[i].checked==true) { int[i].checked = false; } else{ int[i].checked = true;} } }; }; </script> </head> <body> <input id="btn1" type="button" value="全选"/><br> <input id="btn2" type="button" value="不选"/><br> <input id="btn3" type="button" value="反选"/><br> <div id="d1">
<input type="checkbox"/><br> <input type="checkbox"/><br> <input type="checkbox"/><br> <input type="checkbox"/><br> <input type="checkbox"/><br> <input type="checkbox"/><br> <input type="checkbox"/><br> <input type="checkbox"/><br> <input type="checkbox"/><br> <input type="checkbox"/><br> <input type="checkbox"/><br> <input type="checkbox"/><br>
</div> </body> </html>
2 window.onload
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>行间样式</title> <script> window.onload=function(){ var doc=document.getElementById('ww'); function rr(){ alert('4354645765'); } doc.onclick=rr; }
</script> </head> <body> <input id="ww" type="button" value="ert" onclick="">
var doc=document.getElementById('ww'); function rr(){ alert('4354645765'); } doc.onclick=rr;
</body> </html>
3选项卡
<meta charset="UTF-8"> <title></title> <style> #div1 .active{background:purple} #div1 div{background: olivedrab;width: 200px;height: 200px; border: 1px solid blue; display: none} </style> <script> window.onload=function(){ var oDiv=document.getElementById('div1'); var aBtn=oDiv.getElementsByTagName('input'); var aDiv=oDiv.getElementsByTagName('div');
for( var i=0;i<aBtn.length;i++){ aBtn[i].index=i; aBtn[i].onclick=function(){ for( var i=0;i<aBtn.length;i++){ aBtn[i].className=""; aDiv[i].style.display='none'; } this.className='active'; aDiv[this.index].style.display='block'; }; }
}; </script> </head> <body> <div id="div1"> <input class="active" type="button" value="教育"> <input type="button" value="培训"> <input type="button" value="招生"> <input type="button" value="出国"> <div style="display: block">111</div> <div>222</div> <div>333</div> <div>444</div>
JS的显示隐藏
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>显示隐藏</title> <style> #d1{width: 100px;height: 200px;background: yellowgreen;display: none} </style> <script> function d11(){ var doc=document.getElementById('d1'); if(doc.style.display=='block') { doc.style.display='none' } else{ doc.style.display='block' } } </script> </head> <body> <input type="button"value="显示隐藏" onclick="d11()"> <div id="d1"></div>
</body> </html>
浙公网安备 33010602011771号