• JS实例2


    进度条

        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>无标题文档</title>
            <style type="text/css">
    			*{
    				margin:0px auto;
    				padding:0px;
    				}
    			#a{
    				500px;
    				height:30px;
    				}
    			#b{
    				height:30px;
    				background-color:#0F0;
    				float:left;
    				}		
            </style>
        </head>
        
        <body>
        	<div id="a">
                <div id="b" style="0px;"></div>
            </div>
        </body>
        <script type="text/javascript">
    	    window.setInterval("Pao()",20)
    		function Pao()//Pao()是随便设置可以是任何字母只要不重名
    		{
    			var b=document.getElementById("b");//找到b的内容用变量调用
    			var c=b.style.width;//获取b的样式属性width,这样字符串c=(0,p,x)
    			var d=c.substr(0,c.length-2);//substr是截取字符串;截取字符串中的0去掉px(索引值第一位,字符串长度-2)
    			if(d<500)//div总宽度为500px
    			{
    				d=parseInt(d)+2//把d强制穿换成整数类型然后加2(可以是加任何整数)然后在把值还给d,这样d就hi一直加2循环
    				b.style.width=d+"px"//b的宽度为2+2循环下去
    			}
    		}
        </script>
    

     

    点击让左右大小变化(布局)

        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>无标题文档</title>
            <style type="text/css">
    			*{
    				margin:0px auto;
    				padding:0px;
    				}
            	#wai{
    				100%;
    				height:500px;
    				}
    			#nei_1{
    				
    				height:500px;
    				background-color:blue;
    				float:left;
    				}
    			#nei_2{
    				
    				height:500px;
    				background-color:#6C0;
    				float:left;
    				}
    			#anniu{
    				50px;
    				height:50px;
    				background-color:red;
    				position:absolute;
    				top:225px;
    				}
    			
            </style>
        </head>
        
        <body>
        	<div id="wai">
            	<div id="nei_1" style="200px;" onclick="Hua()"></div>
                <div id="nei_2" style="700px;" onclick="Hui()"></div>
            </div>
            <div id="anniu" onclick="Hua()"  style="left:175px;"></div>
        </body>
    

     

    点击中间的红色框让蓝变大绿变小对红色加点击事件

    如果蓝色变大相应的绿色变小,红色左边距变大,给他们三个都要定一个变量,

    <script type="text/javascript">
        	//蓝色的长度变大
    		//绿色的长度变小
    		//红色框的位置
    		var id;
    		function Hua()
    		{
    			id = window.setInterval("Dong()",20);	
    		}
    		//每一次调用一次,改变的样式
    		function Dong()
    		{
    			//获取蓝色的元素
    			var left = document.getElementById("nei_1");
    			
    			//获取蓝色的宽度
    			var lw = left.style.width;	
    			
    			//判断宽度是否超出
    			if(parseInt(lw.substr(0,lw.length-2))>700)
    			{
    				window.clearInterval(id);
    				return;	
    			}
    			
    			//获取数字加2
    			lw = parseInt(lw.substr(0,lw.length-2))+2;
    			
    			//修改样式
    			left.style.width = lw+"px";		
    			//绿色的修改
    			var right = document.getElementById("nei_2");
    			var rw = right.style.width;
    			rw = parseInt(rw.substr(0,rw.length-2))-2;
    			right.style.width = rw+"px";
    			//红色的修改
    			var an = document.getElementById("anniu");
    			var al = an.style.left;
    			al = parseInt(al.substr(0,al.length-2))+2;
    			an.style.left = al+"px";
    		}
    

     

    点击绿色再让绿色变大蓝色变小

    		var ad;
    		function Hui()
    		{
    			ad = window.setInterval("Lai()",20);	
    		}
    		function Lai()
    		{
    			//绿色的修改
    			var right = document.getElementById("nei_2");
    			var rw = right.style.width;
    			if(parseInt(rw.substr(0,rw.length-2))>700)
    			{
    				window.clearInterval(ad);
    				return;	
    			}
    			rw = parseInt(rw.substr(0,rw.length-2))+2;
    			right.style.width = rw+"px";
    			//红色的修改
    			var an = document.getElementById("anniu");
    			var al = an.style.left;
    			al = parseInt(al.substr(0,al.length-2))-2;
    			an.style.left = al+"px";
    			//获取蓝色的元素
    			var left = document.getElementById("nei_1");
    			
    			//获取蓝色的宽度
    			var lw = left.style.width;
    			lw = parseInt(lw.substr(0,lw.length-2))-2;
    			left.style.width = lw+"px";	
    		}
        </script>
    

    这样就可以循环来回点击变大变小

  • 相关阅读:
    Django视图
    Django模板系统
    错误:java.sql.SQLException: Access denied for user 'xxx'@'localhost' (using password: YES)
    关于Spring使用XML配置AOP时pointcut位置的一个小问题
    在jsp页面中将Java对象转换位JS对象的一个思路
    关于artifact XXXX:war exploded: Error during artifact deployment. See server log for details.错误
    框架集合——Java面向对象基础(33)
    使用Socket简单模拟C/S消息传递(UDP)——Java面向对象基础(32)
    使用Socket简单模拟C/S消息传递(TCP)——Java面向对象基础(31)
    对象序列化——Java面向对象基础(30)
  • 原文地址:https://www.cnblogs.com/navyouth/p/7724517.html
Copyright © 2020-2023  润新知