js--09定时器
2024-08-30 17:15:56
<!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]; }
最新文章
- Solr初始化源码分析-Solr初始化与启动
- 1031MySQL事务隔离级别详解
- ACM 变态最大值
- GCD工作单元
- [ZZ] Maxwell 架构
- hdu4588Count The Carries
- DB2 错误编码 查询（二）（转）
- IT English Collection(16) of Message
- VS2008常见编译错误（总结篇）
- 《Effective C++ 》学习笔记——条款03
- c#多选下拉框（ComboBox）
- Eclipse 配置工程
- 利用Div+CSS整体布局页面的操作流程
- ConcurrenHashMap源码分析(二)
- 部署Java和Tomcat
- Linux进程管理 (9)实时调度类分析，以及FIFO和RR对比实验
- Windows下struct和union字节对齐设置以及大小的确定（一 简介和结构体大小的确定）
- 【Python】批量查询-提取站长之家IP批量查询的结果v1.0
- kafka系列四、kafka架构原理、高可靠性存储分析及配置优化
- nRF51 DK : nRF51822 Development Kit for Bluetooth Smart, ANT and 2.4GHz applications.