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 ...
随机推荐
- JAVA中的array是通过线性表还是链表实现的呢？
由于高级程序设计语言中的数组类型也有随机存取的特性,因此,通常都用数组来描述数据结构中的顺序存储结构.
- PHP 正则表达式---匹配模式
1.PHP 正则表达式 正则表达式贪婪匹配,非贪婪匹配. 默认是贪婪匹配, 例如 ①.贪婪匹配, $str = ' 香肠 月饼 '; preg_match('/ (.)</td>/',$s ...
- postgre
切换用户:su postgres 启动:psql 查看有哪些数据库: \l 切换到数据库air: \c air 列出数据库中所有表: \d 列出指定表的所有字段信息: \d+ dag 或者 \d da ...
- Servlet重写init(ServletConfig config)还是init()
原文地址:Servlet重写init(ServletConfig config)还是init() 写一个Servlet时,有时需要我们重写该Servlet的初始化方法,然后,究竟是重写init(Ser ...
- LeetCode 884 Uncommon Words from Two Sentences 解题报告
题目要求 We are given two sentences A and B. (A sentence is a string of space separated words. Each wo ...
- django上下文处理器
上下文处理器(context processors)上下文处理器是可以返回一些数据,在全局模板中都可以使用.比如登录后的用户信息,在很多页面中都需要使用,那么我们可以放在上下文处理器中,就没有必要在每 ...
- html5页面与android页面之间通过url传递参数
html5页面与android页面之间可以通过url传递参数,android将参数放在htm5的url ?后面,js获取url ?号后面的参数. 方法一: <scrīpt> /* 用途 ...
- php 关于时间函数
1. 设置时区 date_default_timezone_set() 和 putenv() 让时间安全地设置就,输入如下代码: date_default_timezone_set('UTC'); / ...
- 异步fifo的Verilog实现
一.分析 由于是异步FIFO的设计,读写时钟不一样,在产生读空信号和写满信号时,会涉及到跨时钟域的问题,如何解决? 跨时钟域的问题:由于读指针是属于读时钟域的,写指针是属于写时钟域的,而异步FIFO ...
- Hadoop 尝试
一. 使用环境Ubuntu 安装Hadoop需要的软件 命令: $ sudo apt-get install ssh $ sudo apt-get install rsync 提示错误: 错误原因: ...