`
实学实战
  • 浏览: 16301 次
  • 性别: Icon_minigender_1
  • 来自: 青岛
文章分类
社区版块
存档分类
最新评论

javascript 经典案例

 
阅读更多


定时器




javascript 全选 不选 反选

javascript 经典案例 全选 不选 反选

<title>规范：全选 不选  反选</title>
<script>
window.onload=function (){

   var oBtn1=document.getElementById("Btn1");
   var oBtn2=document.getElementById("Btn2");
   var oBtn3=document.getElementById("Btn3");
   var oDiv=document.getElementById("Ben");
   var oInp=oDiv.getElementsByTagName("input");
   
   oBtn1.onclick=function(){     //全选
	    //oInp[0].checked=true;   // checked ： 布尔值  false  true;
	     for(var i=0; i<oInp.length ; i++){
	     oInp[i].checked=true;	
		}  
   }; 
   oBtn2.onclick=function(){    //不选
		for(var i=0; i<oInp.length ; i++){
		      oInp[i].checked=false;
		}  
   };   
   oBtn3.onclick=function(){    //反选
		for(var i=0; i<oInp.length ; i++){
		    if(oInp[i].checked==true){
			
			    oInp[i].checked=false;
			}
			else{
			    oInp[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="Ben">
<input type="checkbox"  /><br />
<input type="checkbox" /><br />  <!--复选框   checked  选中-->
<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>


javascript 简单的选项卡

<style>
#div1 input{ background:white;}
#div1 input.active{ background:yellow;}
#div1 div{ width:200px; height:200px; background:#999966; display:none; color:#000000;}
</style>

<script>
window.onload=function(){
    var Div=document.getElementById('div1');    
    var aBtn=Div.getElementsByTagName('input');
    var aDiv=Div.getElementsByTagName('div');

for(var i=0; i<aBtn.length; i++){
        aBtn[i].index=i;                                       //   记录
        aBtn[i].onmouseover=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="选项1" />
<input  type="button" value="选项2" />
<input  type="button" value="选项3" />

<div style="display:block;" >这是容11111111</div>
<div>这是是内容22222222</div
<div>这是是内容3333333</div>
</div>


<style>
#div1 input{ background:white;}
#div1 input.active{ background:yellow;}
#div1 div{ width:200px; height:200px; background:#ccc; display:none;}
</style>

<script>
window.onload=function(){            //  构造函数：window.onload= 
    new TaWny('div1');               //  创建对象：TaWny('div1')传参
};
function TaWny(id){                  //  构造函数：
    var _this = this;                //传参   找到  this
    var oDiv=document.getElementById(id);               //接收  TaWny('div1')  函数的参数
    this.aBtn=oDiv.getElementsByTagName('input');
    this.aDiv=oDiv.getElementsByTagName('div');
for(var i=0; i<this.aBtn.length; i++){
   this.aBtn[i].index=i;
   this.aBtn[i].onmouseover=function(){                 //函数  _this.ofclick(this);  
   _this.getonmouse(this);                              //传参   找到  this  
  };                                                    //  面向对象：函数不要嵌套
 }
};
TaWny.prototype.getonmouse=function (aBtn){              //  用prototype原型     使函数变成方法
  for( var i=0; i<this.aBtn.length; i++){
                    this.aBtn[i].className='';          //清空
                    this.aDiv[i].style.display="none";  
  }
     aBtn.className='active';                     //样式
     this.aDiv[aBtn.index].style.display='block';
};
</script>
<div id="div1">
<input class="active" type="button" value="选项1" />
<input  type="button" value="选项2" />
<input  type="button" value="选项3" />


<div style="display:block;" >这是容11111111</div>
<div>这是是内容222222</div>
<div>这是是内容3333</div>



<style>
#div1 input{ background:white;}
#div1 input.active{ background:yellow;}
#div1 div{ width:200px; height:200px; background:#ccc; display:none;}
</style>

<script>
window.onload=function(){            //  构造函数：window.onload= 
    new TaWny('div1');               //  创建对象：TaWny('div1')传参
};
function TaWny(id){                  //  构造函数：
    var _this = this;                //传参   找到  this
    var oDiv=document.getElementById(id);               //接收  TaWny('div1')  函数的参数
    this.aBtn=oDiv.getElementsByTagName('input');
    this.aDiv=oDiv.getElementsByTagName('div');
for(var i=0; i<this.aBtn.length; i++){
   this.aBtn[i].index=i;
   this.aBtn[i].onmouseover=function(){                 //函数  _this.ofclick(this);  
   _this.getonmouse(this);                              //传参   找到  this  
  };                                                    //  面向对象：函数不要嵌套
 }
};
TaWny.prototype.getonmouse=function (aBtn){              //  用prototype原型     使函数变成方法
  for( var i=0; i<this.aBtn.length; i++){
                    this.aBtn[i].className='';          //清空
                    this.aDiv[i].style.display="none";  
  }
     aBtn.className='active';                     //样式
     this.aDiv[aBtn.index].style.display='block';
};
</script>
<div id="div1">
<input class="active" type="button" value="选项1" />
<input  type="button" value="选项2" />
<input  type="button" value="选项3" />


<div style="display:block;" >这是容11111111</div>
<div>这是是内容222222</div>
<div>这是是内容3333</div>



javascript 经典案例 面向对象的选项卡 

<style>
#div1 input{ background:white;}
#div1 input.active{ background:yellow;}
#div1 div{ width:200px; height:200px; background:#ccc; display:none;}
</style>

<script>
window.onload=function(){            //  构造函数：window.onload= 
    new TaWny('div1');               //  创建对象：TaWny('div1')传参
};
function TaWny(id){                  //  构造函数：
    var _this = this;                //传参   找到  this
    var oDiv=document.getElementById(id);               //接收  TaWny('div1')  函数的参数
    this.aBtn=oDiv.getElementsByTagName('input');
    this.aDiv=oDiv.getElementsByTagName('div');
for(var i=0; i<this.aBtn.length; i++){
   this.aBtn[i].index=i;
   this.aBtn[i].onmouseover=function(){                 //函数  _this.ofclick(this);  
   _this.getonmouse(this);                              //传参   找到  this  
  };                                                    //  面向对象：函数不要嵌套
 }
};
TaWny.prototype.getonmouse=function (aBtn){              //  用prototype原型     使函数变成方法
  for( var i=0; i<this.aBtn.length; i++){
                    this.aBtn[i].className='';          //清空
                    this.aDiv[i].style.display="none";  
  }
     aBtn.className='active';                     //样式
     this.aDiv[aBtn.index].style.display='block';
};
</script>
<div id="div1">
<input class="active" type="button" value="选项1" />
<input  type="button" value="选项2" />
<input  type="button" value="选项3" />


<div style="display:block;" >这是容11111111</div>
<div>这是是内容222222</div>
<div>这是是内容3333</div>





<style>
#div1 input{ background:white;}
#div1 input.active{ background:yellow;}
#div1 div{ width:200px; height:200px; background:#ccc; display:none;}
</style>

<script>
window.onload=function(){            //  构造函数：window.onload= 
    new TaWny('div1');               //  创建对象：TaWny('div1')传参
};
function TaWny(id){                  //  构造函数：
    var _this = this;                //传参   找到  this
    var oDiv=document.getElementById(id);               //接收  TaWny('div1')  函数的参数
    this.aBtn=oDiv.getElementsByTagName('input');
    this.aDiv=oDiv.getElementsByTagName('div');
for(var i=0; i<this.aBtn.length; i++){
   this.aBtn[i].index=i;
   this.aBtn[i].onmouseover=function(){                 //函数  _this.ofclick(this);  
   _this.getonmouse(this);                              //传参   找到  this  
  };                                                    //  面向对象：函数不要嵌套
 }
};
TaWny.prototype.getonmouse=function (aBtn){              //  用prototype原型     使函数变成方法
  for( var i=0; i<this.aBtn.length; i++){
                    this.aBtn[i].className='';          //清空
                    this.aDiv[i].style.display="none";  
  }
     aBtn.className='active';                     //样式
     this.aDiv[aBtn.index].style.display='block';
};
</script>
<div id="div1">
<input class="active" type="button" value="选项1" />
<input  type="button" value="选项2" />
<input  type="button" value="选项3" />


<div style="display:block;" >这是容11111111</div>
<div>这是是内容222222</div>
<div>这是是内容3333</div>







<style>
#div1 input{ background:white;}
#div1 input.active{ background:yellow;}
#div1 div{ width:200px; height:200px; background:#ccc; display:none;}
</style>

<script>
window.onload=function(){            //  构造函数：window.onload= 
    new TaWny('div1');               //  创建对象：TaWny('div1')传参
};
function TaWny(id){                  //  构造函数：
    var _this = this;                //传参   找到  this
    var oDiv=document.getElementById(id);               //接收  TaWny('div1')  函数的参数
    this.aBtn=oDiv.getElementsByTagName('input');
    this.aDiv=oDiv.getElementsByTagName('div');
for(var i=0; i<this.aBtn.length; i++){
   this.aBtn[i].index=i;
   this.aBtn[i].onmouseover=function(){                 //函数  _this.ofclick(this);  
   _this.getonmouse(this);                              //传参   找到  this  
  };                                                    //  面向对象：函数不要嵌套
 }
};
TaWny.prototype.getonmouse=function (aBtn){              //  用prototype原型     使函数变成方法
  for( var i=0; i<this.aBtn.length; i++){
                    this.aBtn[i].className='';          //清空
                    this.aDiv[i].style.display="none";  
  }
     aBtn.className='active';                     //样式
     this.aDiv[aBtn.index].style.display='block';
};
</script>
<div id="div1">
<input class="active" type="button" value="选项1" />
<input  type="button" value="选项2" />
<input  type="button" value="选项3" />


<div style="display:block;" >这是容11111111</div>
<div>这是是内容222222</div>
<div>这是是内容3333</div>









<style>
#div1 input{ background:white;}
#div1 input.active{ background:yellow;}
#div1 div{ width:200px; height:200px; background:#ccc; display:none;}
</style>

<script>
window.onload=function(){            //  构造函数：window.onload= 
    new TaWny('div1');               //  创建对象：TaWny('div1')传参
};
function TaWny(id){                  //  构造函数：
    var _this = this;                //传参   找到  this
    var oDiv=document.getElementById(id);               //接收  TaWny('div1')  函数的参数
    this.aBtn=oDiv.getElementsByTagName('input');
    this.aDiv=oDiv.getElementsByTagName('div');
for(var i=0; i<this.aBtn.length; i++){
   this.aBtn[i].index=i;
   this.aBtn[i].onmouseover=function(){                 //函数  _this.ofclick(this);  
   _this.getonmouse(this);                              //传参   找到  this  
  };                                                    //  面向对象：函数不要嵌套
 }
};
TaWny.prototype.getonmouse=function (aBtn){              //  用prototype原型     使函数变成方法
  for( var i=0; i<this.aBtn.length; i++){
                    this.aBtn[i].className='';          //清空
                    this.aDiv[i].style.display="none";  
  }
     aBtn.className='active';                     //样式
     this.aDiv[aBtn.index].style.display='block';
};
</script>
<div id="div1">
<input class="active" type="button" value="选项1" />
<input  type="button" value="选项2" />
<input  type="button" value="选项3" />


<div style="display:block;" >这是容11111111</div>
<div>这是是内容222222</div>
<div>这是是内容3333</div>






   



  


  

    
    
分享到：
      
      
    

  


  

    

      
      |
      JSTL标签库：choose、when、otherwise、se ...
    

  

  

        
  

    
  

    
评论

    
    
    
    
  


  

    
发表评论

            
   您还没有登录,请您登录后再发表评论 

      

  

  





  

    
相关推荐

    
    
  





  
    Magicbox
  













      

            
    

    
    
  

  



   Global site tag (gtag.js) - Google Analytics