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{

				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的更多相关文章

Vue.js实例练习
最近学习Vue.js感觉跟不上节奏了,Vue.js用起来很方便. 主要实现功能,能添加书的内容和删除.(用的Bootstrap的样式)demo链接标题用了自定义组件,代码如下: components ...
JS实例
JS实例 1.跑马灯 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记3
技术很多,例子很多,只好慢慢学,慢慢实践!!现在学的这本书是[JavaScript实战----JavaScript.jQuery.HTML5.Node.js实例大全] JavaScript.jQuer ...
JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记2
技术很多,例子很多,只好慢慢学,慢慢实践!!现在学的这本书是[JavaScript实战----JavaScript.jQuery.HTML5.Node.js实例大全] JavaScript.jQuer ...
JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记1
技术很多,例子很多,只好慢慢学,慢慢实践!!现在学的这本书是[JavaScript实战----JavaScript.jQuery.HTML5.Node.js实例大全] 第 3 章用 JavaScri ...
【js实例】Array类型的9个数组方法,Date类型的41个日期方法,Function类型
前文提要:[js实例]js中的5种基本数据类型和9种操作符 Array类型的9个数组方法 Array中有9个数组方法: 1.检测数组 2.转换方法 3.栈方法 4.队列方法 5.冲排序方法6.操作方法 ...
[百度地图] 用于类似 DWZ UI 框架的百度地图功能封装类 [MultiZMap.js] 实例源码
MultiZMap 功能说明 MultiZMap.js 本类方法功能大多使用 prototype 原型实现,它是 ZMap 的多加载版本,主要用于类似 DWZ 这个多标签的 UI 的框架: 包含的 ...
模拟jQuery中的ready方法及实现按需加载css,js实例代码
这篇文章介绍了模拟jQuery中的ready方法及实现按需加载css,js实例代码,有需要的朋友可以参考一下一.ready函数的实现经常用jQuery类库或其他类库中的ready方法,有时候 ...
百度地图整合功能分享修正版[ZMap.js] 实例源码!
ZMap 功能说明 ZMap 是学习百度地图 api 接口,开发基本功能后整的一个脚本类,本类方法功能大多使用 prototype 原型实现: 包含的功能有:轨迹回放,圈画区域可编辑,判断几个坐标是 ...
jquery.validate.js实例演示
validate是前端重要的交互手段,提升性能的同时更能提升用户操作体验,validate的实现大概有三种方式:HTML5部分支持,validate验证框架,手动写js或ajax调用接口.使用val ...

随机推荐

Flume 在有赞大数据的实践
https://mp.weixin.qq.com/s/gd0KMAt7z0WbrJL0RkMEtA 原创: 有赞技术有赞coder 今天文 | hujiahua on 大数据一.前言 Flume ...
mysql设置指定ip访问，用户权限相关操作
基础语法GRANT priv_type ON database.table TO user[IDENTIFIED BY [PASSWORD] 'password'] [,user [IDENTIFIE ...
Win10系统桌面右键新建没有内容怎么恢复
Win10系统桌面右键新建没有内容怎么恢复添加txt文本文档运行->regedit,打开注册表编辑器展开HKEY_CLASSES_ROOT 找到.txt 选中.txt,修改右侧窗格的“默认 ...
Java+selenium 如何定位下拉框select
场景:需要进行下拉选择定位元素. 一.select菜单 select也是比较常见的,selenium封装了以下方法, 创建select WebElement selector = dr ...
如何将wordpress所有文章批量改为已发布状态
用wordpress建站的一个好处就是bd站长工具平台上有数据结构插件,可以认为bd默认支持wp发展,另外一种建站程序是discuz.我们在用wordpress发布文章时,特别是那种多用户投稿的文章一 ...
Eclipse ADT中的logcat不显示解决方法
今天维护android的程序,也不知道几百年前写的,elipse,一个日志文件都不显示,做的想哭,我使用的方法二,这里给自己留一个备份,怕再忘记了 1.在Eclipse界面中找到DDMS,然后找到 ...
MySQL准入规范及容量评估
一.数据库设计 1.表结构设计 -表中的自增列(auto_increment属性)推荐使用bigint类型 -首选使用非空的唯一键, 其次选择自增列或发号器不使用更新频繁的列,尽量不选择字符串列,不 ...
python类型错误：can only concatenate list (not "str") to list
TypeError:can only concatenate list (not "str") to list: 类型错误:只能将list类型和list类型联系起来,而不是str类 ...
002-读书笔记-企业IT架构转型之道-阿里巴巴中台战略思想与架构实战-第二章构建业务中台的基础-共享服务体系简介
2.1.回归SOA的本质-服务重用 SOA理念的核心价值:松耦合的服务带来业务的复用,通过服务的编排助力业务的快速响应和创新. 现有模式多是烟囱式结合 ESB 企业总线打通不同系统间的交互. 2.2. ...
freespace_evidence
根据视点计算点云的freespace_evidence 参考资料: Bresenham's line algorithm:https://en.wikipedia.org/wiki/Bresenham ...

JS实例2

JS实例2的更多相关文章

随机推荐

热门专题