js--09定时器
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1 { width:100px; height:100px; background:red; position:absolute; top:50px; left:30px; }
</style>
</head> <body> <input id="btn1" type="button" value="往后" />
<input id="btn2" type="button" value="往前" />
<div id="div1"></div> <script>
var oBtn1 = document.getElementById('btn1');
var oBtn2 = document.getElementById('btn2');
var oDiv = document.getElementById('div1'); oBtn1.onclick = function () {
clearInterval( oDiv.timer );//开定时器之前要先停止定时器，停止div身上的timer,clearInterval(null/未定义)是可以的，
oDiv.timer = setInterval(function () {//变量尽量不要放在外面
var speed = parseInt(getStyle( oDiv, 'left' )) + -12;// getStyle( oDiv, 'left' )返回30px，parseInt()去掉px，
if ( speed < 10 ) {//先控制speed，再将speed赋值给style.left,
speed = 10;
}
oDiv.style.left = speed + 'px';
if ( speed == 10 ) {
clearInterval( oDiv.timer );
}
}, 30);
}; function getStyle ( obj, attr ) { //获取对象的属性，认识obj.currentStyle表示是IE6.7.8，不同的语法获取属性，
return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];
}
</script> </body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1 { width:100px; height:100px; background:red; position:absolute; top:50px; left:30px; }
</style>
</head> <body> <input id="btn1" type="button" value="往上" />
<input id="btn2" type="button" value="往下" />
<div id="div1"></div> <script>
var oBtn1 = document.getElementById('btn1');
var oBtn2 = document.getElementById('btn2');
var oDiv = document.getElementById('div1'); oBtn1.onclick = function () {
doMove ( oDiv, 'top', 12, 40 );
}; oBtn2.onclick = function () {
doMove ( oDiv, 'top', 12, 500 );
}; function doMove ( obj, attr, dir, target ) {//把标签div对象传进来，dir是整数，attr是属性名，
dir = parseInt(getStyle( obj, attr )) < target ? dir : -dir;//当前位置比目标位置小就是正数，比目标位置大就是负数
clearInterval( obj.timer );//给标签添加自定义属性
obj.timer = setInterval(function () {
var speed = parseInt(getStyle( obj, attr )) + dir;
if ( speed > target && dir > 0 || speed < target && dir < 0 ) {
speed = target;
}
obj.style[attr] = speed + 'px';//js修改样式
if ( speed == target ) {
clearInterval( obj.timer );
}
}, 30);
} function getStyle ( obj, attr ) { return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle( obj )[attr]; }
</script> </body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1 { width:100px; height:100px; background:red; position:absolute; top:50px; left:30px; }
</style>
</head> <body> <input id="btn1" type="button" value="往上" />
<input id="btn2" type="button" value="往下" />
<div id="div1"></div> <script>
var oBtn1 = document.getElementById('btn1');
var oBtn2 = document.getElementById('btn2');
var oDiv = document.getElementById('div1'); oBtn1.onclick = function () {
doMove ( oDiv, 'top', 12, 40 );
}; oBtn2.onclick = function () {
doMove ( oDiv, 'top', 12, 500 );
}; function doMove ( obj, attr, dir, target ) {//把标签div对象传进来，dir是整数，attr是属性名，
dir = parseInt(getStyle( obj, attr )) < target ? dir : -dir;//当前位置比目标位置小就是正数，比目标位置大就是负数
clearInterval( obj.timer );//给标签添加自定义属性
obj.timer = setInterval(function () {
var speed = parseInt(getStyle( obj, attr )) + dir;
if ( speed > target && dir > 0 || speed < target && dir < 0 ) {
speed = target;
}
obj.style[attr] = speed + 'px';//js修改样式
if ( speed == target ) {
clearInterval( obj.timer );
}
}, 30);
} function getStyle ( obj, attr ) { return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle( obj )[attr]; }
</script> </body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1 { width:100px; height:100px; background:red; position:absolute; top:50px; left:30px; }
</style>
</head> <body> <input id="btn1" type="button" value="走" />
<div id="div1"></div> <script>
var oBtn1 = document.getElementById('btn1');
var oDiv = document.getElementById('div1'); oBtn1.onclick = function () {
// doMove ( oDiv, 'width', 34, 600 );
doMove ( oDiv, 'left', 12, 900, function () {
doMove ( oDiv, 'top', 34, 500 );//doMove有5个参数，这里传递4个也可以
}); }; function doMove ( obj, attr, dir, target, endFn ) {
dir = parseInt(getStyle( obj, attr )) < target ? dir : -dir;
clearInterval( obj.timer );
obj.timer = setInterval(function () {
var speed = parseInt(getStyle( obj, attr )) + dir;
if ( speed > target && dir > 0 || speed < target && dir < 0 ) {
speed = target;
}
obj.style[attr] = speed + 'px';
if ( speed == target ) {
clearInterval( obj.timer );
/*
if ( endFn ) //函数不是undefined就执行
endFn();
}
*/
endFn && endFn(); // endFn 是真不是undefined就走到后面去
}
}, 30);
} function getStyle ( obj, attr ) { return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle( obj )[attr]; }
</script> </body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>图片抖动</title>
<style>
img { position:absolute; top:200px; left:300px; width:180px; }
#img1 { left:100px; }
</style> <script src="miaov.js"></script>
<script>
window.onload = function () {
var oImg1 = document.getElementById('img1');
var oImg2 = document.getElementById('img2');
oImg1.onclick = fnShake;
oImg2.onclick = fnShake;
function fnShake() {
var _this = this;//this是图片
shake( _this, 'left', function(){
shake( _this, 'top' );
});
}
}; function shake ( obj, attr, endFn ) {
var pos = parseInt( getStyle(obj, attr) );//原来位置
var arr = []; // 20, -20, 18, -18 ..... 0
var num = 0;
var timer = null;
for ( var i=20; i>0; i-=2 ) {
arr.push( i, -i );//push 2个
}
arr.push(0);
clearInterval( obj.shake );
obj.shake = setInterval(function (){
obj.style[attr] = pos + arr[num] + 'px';//原来位置加上数组值
num++;
if ( num === arr.length ) {
clearInterval( obj.shake );
endFn && endFn();//左右抖动在上下抖动
}
}, 50);
}
</script> </head> <body> <img id="img1" src="img/4.jpg" />
<img id="img2" src="img/5.jpg" /> </body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>图片抖动</title>
<style>
img { width:100px; height:100px; position:absolute; top:200px; }
</style>
<script> function getStyle ( obj, attr ) { return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle( obj )[attr]; } function shake ( obj, attr, endFn ) {
var pos = parseInt( getStyle(obj, attr) );// 抖动没有停止时候，获取的是抖动的位置，不是最初的位置，有隐患的
var arr = []; // 20, -20, 18, -18 ..... 0
var num = 0;
var timer = null;
for ( var i=20; i>0; i-=2 ) {
arr.push( i, -i );
}
arr.push(0);
clearInterval( obj.shake );
obj.shake = setInterval(function (){
obj.style[attr] = pos + arr[num] + 'px';
num++;
if ( num === arr.length ) {
clearInterval( obj.shake );
endFn && endFn();
}
}, 50);
} window.onload = function () {
var aImg = document.getElementsByTagName('img');
for ( var i=0; i<aImg.length; i++ ) {//遍历所有图片，所有图片加事件。
aImg[i].style.left = 80+i*110 + 'px';
aImg[i].onmouseover = function () {
shake( this, 'top' );
};
}
};
</script> </head> <body> <img src="img/1.jpg" />
<img src="img/2.jpg" />
<img src="img/3.jpg" />
<img src="img/4.jpg" />
<img src="img/5.jpg" />
<img src="img/6.jpg" />
<img src="img/7.jpg" />
<img src="img/8.jpg" /> </body>
</html>
function doMove ( obj, attr, dir, target, endFn ) {
dir = parseInt(getStyle( obj, attr )) < target ? dir : -dir;
clearInterval( obj.timer );
obj.timer = setInterval(function () {
var speed = parseInt(getStyle( obj, attr )) + dir; // 步长
if ( speed > target && dir > 0 || speed < target && dir < 0 ) {
speed = target;
}
obj.style[attr] = speed + 'px';
if ( speed == target ) {
clearInterval( obj.timer );
/*
if ( endFn ) {
endFn();
}
*/
endFn && endFn();
}
}, 30);
}
function getStyle ( obj, attr ) { return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle( obj )[attr]; }
js--09定时器的更多相关文章
- 20150706 js之定时器
对应智能社:09 定时器的使用 开启定时器: setInterval(xxx(),1000);//间隔型 第一个参数为函数,第二个为时间,单位为毫秒 setTimeout(xxx(),1000);// ...
- js延时定时器
// 获取图片方向延时器 getImageOrientationTimer(context) { if (context.imageTimeout) return; if (context.image ...
- 【JavaScript基础】Js的定时器（你想看的原理也在哟）
[JavaScript基础]Js的定时器(你想看的原理也在哟) 博客说明 文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢! 说明 本章是经历 ...
- JS实现定时器
导出:jquery.timers-1.2.js jQuery Timers提供了三个函式 1. everyTime(时间间隔, [定时器名称], 函式名称, [次数限制], [等待函式程序完成])2. ...
- js 关于定时器的知识点。
Js的同步和异步 同步:代码从上到下执行. 异步:每个模块执行自己的,同时执行. js本身就是同步的,但是需要记住四个地方是异步. Js的异步 1.定时器 2.ajax 3事件的绑定 4. ...
- 关于js中定时器的返回值问题
在js中,我们常常会用到定时器来处理各种各样的问题,当我们需要清除定时器的时候,我们常常会定义一个值来接受定时器的返回值,然后再把定义好的这个值写到清除定时器的括弧后面,如: var times = ...
- js 面向对象 定时器 046
获取DOM对象补充 document.getElementsByTagName('div'); //获取的多个DOM对象 这种对象叫伪数组 如果想遍历此对象 通过for(var i=0; i < ...
- 【笔记】js 关于定时器的理解
总所周知 js 里面的 setTimeout() 方法是用来设定某些功能在某段时间间隔之后执行的.但是今天看了高程对定时器的描述发现并不是这样. setTimeout(function(){ //.c ...
- js之定时器
一.通过定时器我们可以间隔设定时间重复调用某个函数,利用这个特性,我们可以做很多事,例如,12306上的每间隔5秒查询自动查询一次余票,简单动画的实现等等 二.定时器的格式: 定时器有两种格式,分别是 ...
- js清除定时器注意点
如何这篇文章所述:https://www.cnblogs.com/mmykdbc/p/7418575.html js多次调用创建定时器的函数,会使定时器速度越来越快,多次调用定时器的使用场景比如:监听 ...
随机推荐
- java9新特性-13-增强的 Stream API
1.使用说明 Java 的 Steam API 是java标准库最好的改进之一,让开发者能够快速运算,从而能够有效的利用数据并行计算.Java 8 提供的 Steam 能够利用多核架构实现声明式的数据 ...
- IE(8~11+) 可用右键加速器
必应词典工具 立即安装: 网络安装:http://dict.bing.com.cn/tools_dl.aspx?dl=ie8acc&mkt=ZH-CN 开发示例: <?xml versi ...
- Intellij使用"easyexplore"
刚开始接触Intellij,里面有很多东西还不太会用,平时在eclipse里面用的很方便的easyexplore能帮助快速打开文件目录,Intellij中本身就有这样的功能,只是默认没有开启,需要我们 ...
- 什么是Monad？
为了理解什么是Monad,最好需要了解什么是Monoid.这两篇互为姐妹篇,因为Monad的定义是:A monad is just a monoid in the category of endofu ...
- 如何使 nginx 支撑更高并发
/** * * * * 如何使 nginx 支撑更高的并发? * 原理: * 服务器方面可以从两个方面阐述: * 1.socket 链接方面:因为每次请求都是一次连接,而 nginx 服务器配置方面默 ...
- 欢迎访问微先锋vXianFeng官方博客
欢迎访问微先锋vXianFeng官方博客,专注微商城.P2P理财.山寨矿机平台研究与开发!
- ArchLinux 设置时间同步和硬件时间同步错误 No usable clock interface found
笔记本不知道怎么了,总是时间对不上 硬件时间也设置不了,只能时间同步了 手动时间同步 ntpdate即可,ntp服务器在这里用这两个就好了 cn.ntp.org.cn 或 edu.ntp.org.cn ...
- [NOIP2013提高组]火柴排队
题目:洛谷P1966.Vijos P1842.codevs3286. 题目大意:有两排火柴,每根都有一个高度.设a.b分别表示两排火柴的高度,现在要令$\sum(a_i-b_i)^2$最小.现两排火柴 ...
- parted---磁盘分区
parted命令是由GNU组织开发的一款功能强大的磁盘分区和分区大小调整工具,与fdisk不同,它支持调整分区的大小.作为一种设计用于Linux的工具,它没有构建成处理与fdisk关联的多种分区类型, ...
- 紫书 例题 10-13 UVa 830（递推）
首先我们按照这三个U的位置来分类,当前三个U在i,i+1, i+2. 那么先看三个U前面,前面不能有三个U,因为我们不能重复计算 那么就是所有的组合减去有U的情况 为了叙述方便,我们设答案为f(n), ...