javascript 经典案例

最新推荐文章于 2023-08-23 16:15:12 发布
最新推荐文章于 2023-08-23 16:15:12 发布
阅读量312 收藏 1
点赞数
文章标签： javascript ViewUI


定时器




javascript 全选 不选 反选

javascript 经典案例 全选 不选 反选

<title>规范：全选 不选  反选</title>
<script>
window.οnlοad=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.οnclick=function(){     //全选
	    //oInp[0].checked=true;   // checked ： 布尔值  false  true;
	     for(var i=0; i<oInp.length ; i++){
	     oInp[i].checked=true;	
		}  
   }; 
   oBtn2.οnclick=function(){    //不选
		for(var i=0; i<oInp.length ; i++){
		      oInp[i].checked=false;
		}  
   };   
   oBtn3.οnclick=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.οnlοad=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].οnmοuseοver=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.οnlοad=function(){            //  构造函数：window.οnlοad= 
    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].οnmοuseοver=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.οnlοad=function(){            //  构造函数：window.οnlοad= 
    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].οnmοuseοver=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.οnlοad=function(){            //  构造函数：window.οnlοad= 
    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].οnmοuseοver=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.οnlοad=function(){            //  构造函数：window.οnlοad= 
    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].οnmοuseοver=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.οnlοad=function(){            //  构造函数：window.οnlοad= 
    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].οnmοuseοver=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.οnlοad=function(){            //  构造函数：window.οnlοad= 
    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].οnmοuseοver=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>
 
 
 
 
 


                

        

        




    




    

      

        

            

              
                
                  Andy Chen 陈郑游
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    1
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
JavaScript经典案例大集合

				
			

			

				

					03-07
				

			

		

		

			
				
该压缩包包含了8个经典案例文件，其中涉及到的案例多数比较经典，对于初学者来说，是熟悉掌握JS的好教程。

			
		

	



                

              
                



	

		

			

				
					
js常见案例总结（一）

				
			

			

				

					不甜呐的博客
				

				

					09-04
					
					498
					
				

			

		

		

			
				
1.变量的交换：


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>变量的交换</title>
	</head>
	<body>
		<script type="text/javascript">
			//变量交换的第一个思路：使用第三方的变量进行交换
			var num1 = 10;
			var num2 = 

			
		

	



                


  
              

                


	

		

			

				
					
20个JavaScript开发案列（一）

				
			

			

				

					终成大师的博客
				

				

					02-17
					
					4423
					
				

			

		

		

			
				
20个JavaScript开发案列（一）

			
		

	





	

		

			

				
					
javaScript常用案例

				
			

			

				

					张张张张张高高的博客
				

				

					09-06
					
					7966
					
				

			

		

		

			
				
前端页面开发之javaScript常用案例

			
		

	



		

			
		



	

		

			

				
					
JS——经典案例

				
			

			

				

					NanChen的博客
				

				

					09-09
					
					935
					
				

			

		

		

			
				
JS的经典案例

			
		

	





	

		

			

				
					
javaScript经典案例

				
			

			

				

					08-23
				

			

		

		

			
				
javaScript经典案例

			
		

	





	

		

			

				
					
20个JavaScript经典案例

					
最新发布

				
			

			

				

					11-21
				

			

		

		

			
				
20个JavaScript经典案例

			
		

	





	

		

			

				
					
JavaScript经典案例集合

				
			

			

				

					01-02
				

			

		

		

			
				
JavaScript经典案例集合是送给入门者最好的礼物！是本人精心总结的案例！可以让你迅速上手，物有所值。内容囊括的js的各个方面，而且由浅入深，条例极为清晰，注释丰富。内容：js基础语法；Dom操作；Div操作；正则...

			
		

	





	

		

			

				
					
JavaScript经典案例之简易计算器

				
			

			

				

					10-14
				

			

		

		

			
				
主要为大家详细介绍了JavaScript经典案例之简易计算器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

			
		

	





	

		

			

				
					
JavaScript的10个基础小案例

				
			

			

				

					m0_56713342的博客
				

				

					08-23
					
					417
					
				

			

		

		

			
				
1、9x9乘法表。

			
		

	





	

		

			

				
					
50个js经典案例

				
			

			

				

					12-19
				

			

		

		

			
				
50个常用的js的案例，便于初学者更好的学习js

			
		

	





	

		

			

				
					
20个JavaScript开发案列（二）

				
			

			

				

					终成大师的博客
				

				

					02-19
					
					1547
					
				

			

		

		

			
				
20个JavaScript开发案列(二)

			
		

	





	

		

			

				
					
js常用基础案例整理(持续更新)

				
			

			

				

					weixin_41086056的博客
				

				

					11-17
					
					9392
					
				

			

		

		

			
				
这里写目录标题一级目录二级目录三级目录036-网页日历035-记住用户名(js代码)034-基础轮播图(js代码)033-京东放大镜效果(js代码)032-简单动画函数封装031-仿淘宝固定侧边栏+返回顶部按钮030-拖动的模态框029-发送短信倒计时案例028-倒计时效果027-模拟京东快递单号查询案例026-模拟京东按键输入内容025-跟随鼠标移动的小人024-动态生成表格案例023-删除留言案例022-新浪下拉菜单021-Tab栏切换(仿京东)020-全选与反选019-表格隔行变色018-开关灯效果0

			
		

	





	

		

			

				
					
JavaScript基础——JS简单案例

				
			

			

				

					m0_68794863的博客
				

				

					12-04
					
					5169
					
				

			

		

		

			
				
JS基础案例

			
		

	





	

		

			

				
					
JavaScript第五天作业案例

				
			

			

				

					qq_41943654的博客
				

				

					04-02
					
					2373
					
				

			

		

		

			
				
JavaScript第五天作业案例
1. 练习1: 使用for循环 - 求出数组元素的和 [5, 8, 9, 2, 1, 5]

运行结果

2. 练习2: 使用for循环 - 求出数组里大于5的和 [4, 9, 5, 20, 3, 11]

运行结果

练习3: 使用for循环 - 求出班级里同学们平均年龄[15, 19, 21, 33, 18, 24]

运行结果

练习4: 打印数组里所有的奇数  [5, 2, 8, 10, 3, 7]

运行结果

练习5: 计算[2, 6, 18, 15, 40]

			
		

	





	

		

			

				
					
JavaScript 各种小案例

				
			

			

				

					老段的CSDN的博客
				

				

					07-30
					
					3267
					
				

			

		

		

			
				
JavaScript 6个常用的小案例

			
		

	





	

		

			

				
					
10个js小案例

				
			

			

				

					weixin_30660027的博客
				

				

					08-25
					
					537
					
				

			

		

		

			
				
知识梳理：
1.DOM(document object model)文档对象模型：html(标签对象集合)
标签名获取对象：document.getElementsByTagName('标签名');//返回的是一个数组
类名获取对象：document.getElementsClassName('类名’);//返回的是一个数组
id获取(id唯一):document.getElem...

			
		

	





	

		

			

				
					
JS练习案例

				
			

			

				

					前端之行，任重道远！
				

				

					06-05
					
					1004
					
				

			

		

		

			
				
99乘法表：

var a = '';
for (var i = 1; i <= 9; i++) {
    for (var n = 1; n <= i; n++) {
        a = a + n + 'x' + i + '=' + i * n + ' ';

    }
    console.log(a);
    a = '';

}


for嵌套：

var a = '';

for (var i = 1; i <= 10; i++) {
    for (var n.

			
		

	





	

		

			

				
					
JavaScript基础案例篇（题目附代码）

				
			

			

				

					qq_66193208的博客
				

				

					04-20
					
					8240
					
				

			

		

		

			
				
这篇文章的代码难度循序渐进，从最基础的变量使用开始，慢慢去提升js的兴趣（这里使用的软件是vscode）

			
		

	





	

		

			

				
					
javascript经典案例

				
			

			

				

					09-24
				

			

		

		

			
				
下面是一些常见的JavaScript经典案例：  1. 动态修改网页内容  使用JavaScript可以在网页加载后动态修改网页内容，比如修改标题、添加新的段落或者图片等。  2. 处理表单  JavaScript可以用来验证表单输入的内容是否...

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值