进度条

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>无标题文档</title>

        <style type="text/css">

			*{

				margin:0px auto;

				padding:0px;

				}

			#a{

				width:500px;

				height:30px;

				}

			#b{

				height:30px;

				background-color:#0F0;

				float:left;

				}

        </style>

    </head>

    <body>

    	<div id="a">

            <div id="b" style="width: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{

				width:100%;

				height:500px;

				}

			#nei_1{

				height:500px;

				background-color:blue;

				float:left;

				}

			#nei_2{

				height:500px;

				background-color:#6C0;

				float:left;

				}

			#anniu{

				width:50px;

				height:50px;

				background-color:red;

				position:absolute;

				top:225px;

				}

        </style>

    </head>

    <body>

    	<div id="wai">

        	<div id="nei_1" style="width:200px;" onclick="Hua()"></div>

            <div id="nei_2" style="width: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>

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

JS实例2的更多相关文章

  1. Vue.js实例练习

    最近学习Vue.js感觉跟不上节奏了,Vue.js用起来很方便. 主要实现功能,能添加书的内容和删除.(用的Bootstrap的样式)demo链接 标题用了自定义组件,代码如下: components ...

  2. JS实例

    JS实例 1.跑马灯 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  3. JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记3

    技术很多,例子很多,只好慢慢学,慢慢实践!!现在学的这本书是[JavaScript实战----JavaScript.jQuery.HTML5.Node.js实例大全] JavaScript.jQuer ...

  4. JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记2

    技术很多,例子很多,只好慢慢学,慢慢实践!!现在学的这本书是[JavaScript实战----JavaScript.jQuery.HTML5.Node.js实例大全] JavaScript.jQuer ...

  5. JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记1

    技术很多,例子很多,只好慢慢学,慢慢实践!!现在学的这本书是[JavaScript实战----JavaScript.jQuery.HTML5.Node.js实例大全] 第 3 章 用 JavaScri ...

  6. 【js实例】Array类型的9个数组方法,Date类型的41个日期方法,Function类型

    前文提要:[js实例]js中的5种基本数据类型和9种操作符 Array类型的9个数组方法 Array中有9个数组方法: 1.检测数组 2.转换方法 3.栈方法 4.队列方法 5.冲排序方法6.操作方法 ...

  7. [百度地图] 用于类似 DWZ UI 框架的 百度地图 功能封装类 [MultiZMap.js] 实例源码

    MultiZMap 功能说明 MultiZMap.js 本类方法功能大多使用 prototype 原型 实现,它是 ZMap 的多加载版本,主要用于类似 DWZ 这个 多标签的 UI 的框架: 包含的 ...

  8. 模拟jQuery中的ready方法及实现按需加载css,js实例代码

    这篇文章介绍了模拟jQuery中的ready方法及实现按需加载css,js实例代码,有需要的朋友可以参考一下     一.ready函数的实现经常用jQuery类库或其他类库中的ready方法,有时候 ...

  9. 百度地图整合功能分享修正版[ZMap.js] 实例源码!

    ZMap 功能说明 ZMap 是学习百度地图 api 接口,开发基本功能后整的一个脚本类,本类方法功能大多使用 prototype 原型 实现: 包含的功能有:轨迹回放,圈画区域可编辑,判断几个坐标是 ...

  10. jquery.validate.js实例演示

    validate是前端重要的交互手段,提升性能的同时更能提升用户操作体验,validate的实现大概有三种方式:HTML5部分支 持,validate验证框架,手动写js或ajax调用接口.使用val ...

随机推荐

  1. Uniform Resource Name Server

    HTTP The Definitive Guide 按址标识 identify by address 按名标识 identify by name Domain Name Server Uniform ...

  2. [network] IPVS / Load balancer / Linux Virtual Server

    Load Balancer IPVS: http://kb.linuxvirtualserver.org/wiki/IPVS NAT: http://kb.linuxvirtualserver.org ...

  3. Copycat - MemberShip

    https://github.com/atomix/copycat   http://atomix.io/copycat/docs/membership/   为了便于实现,Copycat把membe ...

  4. Chrome中安装Firebug插件

    Chrome中的Firebug插件:Firebug Lite 1.Firebug Lite下载:http://chromecj.com/web-development/2015-05/471/down ...

  5. redis分布式锁（转）

    add by zhj: 如果不考虑键的删除,而是让他过期后自动失效,那用set就可以实现锁了 原文:http://www.cnblogs.com/yjf512/archive/2017/03/22/6 ...

  6. linux 替换 sed命令 转载

    转载自这里,感谢原作者 sed 's/test/mytest/g' example.txt 表示将example.txt中的test文本全部替换为mytest 请注意这个命令sed 's/test/m ...

  7. Eclipse EE下载安装与配置

    Eclipse EE下载安装与配置 一.下载 下载链接:http://www.eclipse.org/downloads/eclipse-packages/ 1.进入Eclipse官网进行下载选择Ec ...

  8. javax.lang.model Implementation Backed by Core Reflection

    javax.lang.model Implementation Backed by Core Reflection 1.javax.lang.model: How do I get the type ...

  9. pandas操作速查表

    准备工作 import numpy as np import pandas as pd 倒入文件或创建一个数据表 df = pd.DataFrame(pd.read_csv('name.csv',he ...

  10. 客户机容易随机出现自动重启、游戏卡问题？不妨优化下BIOS中节能技术！

    相信一些玩主板超频的人都知道,给CPU加电压能够提升CPU的处理速度,很多超频爱好者通过采购超频性能较好,且价格较低的主板和CPU来玩超频,并且通过一些参数的问题能让屌丝设备发挥出高富帅的性能.但是玩 ...