zoukankan      html  css  js  c++  java
  • js知识

    行为=事件+由该事件触发的动作

    常用事件:onXxx

    onLoad           打开网页事件

    onUnLoad       关闭事件

    onClick         单击事件
     
    onChange       改变事件

    onMouseOver   鼠标悬浮事件

    onMouseOut    鼠标移开事件

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>改变颜色</title>
    <style>
    #div1{200px; height:200px; background:red;}
    .box{background:#F39;}
    </style>
    <script><!--JavaScript-->
    function toColor(color){//带参数方法
    	var oDiv=document.getElementById('div1');
        oDiv.style.background=color;
    }
    function toValue(name,value){//可选择改变哪一个属性
    	var oDiv=document.getElementById('div1');
        oDiv.style[name]=value;//特别注意[]的使用,[]可以写属性值,也可以写参数名称
    	}
    function toGreen(){//无参数方法,只能实现一种功能
    	var oDiv=document.getElementById('div1');
    	oDiv.style.background='green';
    	}
    function setText(){
    	var oTxt=document.getElementById('txt1');
    	oTxt.value='显示在文本框中';//当调用此方法时,在文本框中显示。
    	oTxt.title='显示成提示信息';//当鼠标移到文本框中,在鼠标上显示信息
    	}
    function setClass(){
    	var oDiv=document.getElementById('div1');
    	oDiv.className="box";
    	}
    </script>
    </head>
    
    <body>
    <input type="button" value="变绿" onclick="toColor('green')"/><!--单击事件调用函数-->
    <input type="button" value="变黄" onclick="toColor('yellow')"/>
    <input type="button" value="变蓝" onclick="toColor('blue')"/>
    <input type="button" value="变高" onclick="toValue('height','400px')"/>
    <input type="button" value="变矮" onclick="toValue('height','150px')"/>
    <input type="button" value="变宽" onclick="toValue('width','400px')"/>
    <input type="button" value="变窄" onclick="toValue('width','150px')"/>
    <input type="button" value="变颜色" onclick="toGreen()"/>
    <div id="div1" >div1区域</div>
    
    
    <input type="text" id="txt1" />
    <input type="button" value="显示文字"  onclick="setText()"/>
    </body>
    </html>
    

     选择框

    css html javascript 完全分离

    window.onLoad 页面加载完成后发生

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <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('div1');
    	var aCh=oDiv.getElementsByTagName('input');
    	oBtn1.onclick=function (){
    		for(var i=0;i<aCh.length;i++){
    		 aCh[i].checked=true;
    		 }
    		};
    	oBtn2.onclick=function (){
    		for(var i=0;i<aCh.length;i++){
    		 aCh[i].checked=false;
    		 }
    		};
    	oBtn3.onclick=function (){
    		for(var i=0;i<aCh.length;i++){
    			if(aCh[i].checked==true){
    				aCh[i].checked=false;
    				}else{
    					aCh[i].checked=true;
    					}
    		 
    		 }
    		};
    	};
    </script>
    </head>
    
    <body>
    <input id="btn1" type="button" value="全选"/>
    <input id="btn2" type="button" value="不选"/>
    <input id="btn3" type="button" value="反选"/>
    <div id="div1">
    <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>
    
  • 相关阅读:
    Html/CSS前端如何实现文字边框阴影
    酷炫,用Html5/CSS实现文字阴影
    前端“黑话”polyfill
    JavaScript之DOM对象获取(1)
    你知道二维码是怎么得来的吗?
    Spring5中的DispatcherServlet初始化
    一文搞懂并发和并行
    使用SecureCRT软件运维的配置习惯
    Linux双网卡绑定
    Linux网卡配置文件参数注释
  • 原文地址:https://www.cnblogs.com/lzzhuany/p/4524056.html
Copyright © 2011-2022 走看看