js--09定时器

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1 { 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 { 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 { 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 { 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; 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 { 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]; }

相关阅读:
选择排序
 迭代器使用过程中为什么抛出ConcurrentModificationException
自定义实现的ArrayList以及自定义实现的Iterator迭代器
 单链表
 collections方法记录
 JDK1.9中关于集合的新方法
 请使用时间相关的API，计算一个人从出生到现在一共活了多少天？
java中对象的向上转型和向下转型
 异常相关知识整理
 可变参数相关知识
原文地址：https://www.cnblogs.com/yaowen/p/6836171.html