进度条

    <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. RabbitMQ消息可靠性

    那些情况会失败 网络问题有很多原因出发失败.防火墙也可能会中断Idle连接,网络失败不是很快确定的. 硬件和软件也会导致系统崩溃.客户端软件保持运行,而逻辑错误也可能会导致channel和connec ...

  2. 2016年蓝桥杯省赛A组c++第1题

    /* 某君新认识一网友. 当问及年龄时,他的网友说: “我的年龄是个2位数,我比儿子大27岁, 如果把我的年龄的两位数字交换位置,刚好就是我儿子的年龄” 请你计算:网友的年龄一共有多少种可能情况? 提 ...

  3. 不能往Windows Server 2008 R2 Server中复制文件的解决方法

    目前一直直接往Windows 2008 R2 Server中复制文件(暂时还没有搭建ftp服务),突然不能复制了,于是百度找到了解决方法,特此记录(记忆). 1.在任务管理器中找到“rdpclip.e ...

  4. 产品列表中使用v-lazyload插件懒加载img图片，但是当产品列表重新排序（人气，销量，价格...），产品info信息改变，但是 img 图片没有发生变化；

    1.控制台查看 DOM 结构,发现 DOM 绑定的图片链接也没有发生变化: 2.查阅资料找到解决方法,只需要在 img 标签中增加 :key='imgUrl',即可实现 img 图片随数据排序的改变动 ...

  5. Android 出现 activity supporting action_view is not set as browsable报错

    <activity android:name=".ThirdActivity"> <intent-filter> <action android:na ...

  6. （4.22）Microsoft 管理控制台启用 SSL 加密的 SQL Server 实例

    如何通过使用 Microsoft 管理控制台启用 SSL 加密的 SQL Server 实例 关键词:MSSQL加密,sql server加密,sql server客户端与服务器传输内容加密 转自:h ...

  7. 前端 HTML 常用标签 head标签相关内容 link标签

    link标签 引入CSS样式文件 href="./index.css" CSS文件的路径 <!-- 引入CSS样式文件 --> <link rel="s ...

  8. kafka5 编写简单生产者

    一 客户端 1.打开eclipse,新建maven项目(new-->other-->Maven Project-->Artifact Id设为mykafka). 2.配置Build ...

  9. Python3学习之路~6.3 类变量 VS 实例变量

    类变量 VS 实例变量 #Author:Zheng Na # 实例里面可以查询.增加.删除.修改实例变量 class Role: # 类名 # 类变量 name = '我是类name' n=1 n_l ...

  10. java native方法及JNI实例 （转）

    转自:http://blog.csdn.net/xw13106209/article/details/6989415 1.参考文献: http://blog.csdn.net/youjianbo_ha ...