zoukankan      html  css  js  c++  java
  • JavaScript实现全选选项框的功能和鼠标划入出现下拉框的功能--JavaScript实例集锦(初学)

    有一些论坛,文章后台编辑都会出现选择框的操作。

    1.实现选项框全选和取消全选的功能:

    代码实现:

    <!DOCTYPE html>
    <html>
    <head>
    	<title>全选功能</title>
    	<script type="text/javascript">
    		window.onload=function(){
    			var oBtn=document.getElementById('btn');
    			var aInput=document.getElementsByTagName('input');	
    			oBtn.onclick=function(){
    				if(aInput[0].checked==false){
    						for(var i=0;i<aInput.length;i++){
    						aInput[i].checked=true;
    				}
    					oBtn.innerHTML="取消";
    			}else{
    				for(var i=0;i<aInput.length;i++){
    						aInput[i].checked=false;
    				}
    				oBtn.innerHTML="全选";
    			}
    			
    			
    			};
    			
    		}
    	</script>
    </head>
    <body>
    <p id="btn">全选</p>
    <input type="checkbox"/><br/>
    <input type="checkbox"/><br/>
    <input type="checkbox"/><br/>
    <input type="checkbox"/><br/>
    <input type="checkbox"/><br/>
    <input type="checkbox"/><br/>
    </body>
    </html>
    

     2.鼠标划入出现下拉框的功能:此处使用了延时定时器的功能 

    代码实现:

    <!DOCTYPE html>
    <html>
    <head>
    	<title>延时隐藏</title>
    	<style type="text/css">
    		#div1{400px;height:200px;background: #f00;}
    		#div2{300px;height: 100px;background: #ccc;margin: 10px;display: none;}
    	</style>
    	<script type="text/javascript">
    		window.onload=function(){
    			var oDiv1=document.getElementById('div1');
    			var oDiv2=document.getElementById('div2');
    			var timer=null;
    		oDiv1.onmouseover=oDiv2.onmouseover=function(){
    				oDiv2.style.display='block';
    				clearTimeout(timer);
    			}
    		oDiv1.onmouseout=oDiv2.onmouseout=function(){
    					timer=setTimeout(function(){
    					oDiv2.style.display="none";
    				},300);
    				}
    		};
    	</script>
    </head>
    <body>
    <div id="div1"></div>
    <div id="div2"></div>
    </body>
    </html>
    

      

  • 相关阅读:
    Spark中文指南(入门篇)-Spark编程模型(一)
    Scala入门学习笔记三--数组使用
    沃老师学生的成绩
    Codeforces Round #461 (Div. 2) DRobot Vacuum Cleaner
    Codeforces Round #461 (Div. 2) ABC
    Educational Codeforces Round 37 (Rated for Div. 2) ABC
    Codeforces Round #460 (Div. 2) D Substring
    Codeforces Round #460 (Div. 2) ABC
    中缀式转后缀式求表达式结果
    计算器——python正则表达式
  • 原文地址:https://www.cnblogs.com/cheryshi/p/8406343.html
Copyright © 2011-2022 走看看