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 ...
随机推荐
- Django 的操作
安装: pip install Django 创建django工程 django-admin startproject mysite python manage.py startapp blog / ...
- [daily][gnucash] 复式记账
管理, 是成就人生的第一步. 管钱,是第一步中的第一小步. 选了又选,终于选了一个软件,gnucash, 但是, 他有点专业, 用之前需要搞懂一下会计概念. 即: 复式记账 gnucash手册的这一章 ...
- hdfs mapreduce hbase
参考资料:http://www.cnblogs.com/sharpxiajun/p/5585613.html 大数据时代的数据量是超大规模的,传统的关系数据库已经很难存储和管理这些数据了,为了存储海量 ...
- LeetCode 852 Peak Index in a Mountain Array 解题报告
题目要求 Let's call an array A a mountain if the following properties hold: A.length >= 3 There exist ...
- 2018/05/02 PHP 之错误与异常处理
在学习中,越学习越觉得自己基础薄弱. 在平常工作中,对于某些错误处理感觉不知道怎么下手,于是决定重新再整理一下. 强烈推荐这篇文章,真的感觉学习到了很多. 部分引用::再谈PHP错误与异常处理 -- ...
- python作用域问题
今天出了个低级的错误,最后确定是作用域问题,特回顾知识点如下: 在Python程序中创建.改变.查找变量名时,都是在一个保存变量名的空间中进行,我们称之为命名空间,也被称之为作用域. Python的作 ...
- Feature如何解决参数数量不匹配
问题描述: Feature 写了两个参数,匹配到Steps.Java, 文件只写了两个参数,但是两个参数都加了$ 符号. 而$ 又是结束的意思. 1一:Feature 用例
- python 合并列表 从大到小排序
#!/usr/bin/env python # -*- coding: utf-8 -*- a = [1,2,3,4,5] b = [6,7,8,9,10] a.extend(b) a.reverse ...
- js篇-json字符串与json对象相互转化
回调返回结果是 json字符串还是json对象一定要看清楚哦,状态不好的时候,感觉眼神也不好使了, var a = "{"name":"jenny", ...
- 由swap引发的关于按值传递和引用传递的思考与总结
函数的参数传递定义:在调用一个函数时,将实参传递给形参. C++中函数的参数传递有按值传递.地址传递和引用传递3种方式.注意:地址也是一种值,按值传递和按地址传递都是单向的值传递方式,即形参都不会回传 ...