<!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定时器的更多相关文章

  1. 20150706 js之定时器

    对应智能社:09 定时器的使用 开启定时器: setInterval(xxx(),1000);//间隔型 第一个参数为函数,第二个为时间,单位为毫秒 setTimeout(xxx(),1000);// ...

  2. js延时定时器

    // 获取图片方向延时器 getImageOrientationTimer(context) { if (context.imageTimeout) return; if (context.image ...

  3. 【JavaScript基础】Js的定时器（你想看的原理也在哟）

    [JavaScript基础]Js的定时器(你想看的原理也在哟) 博客说明 文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢! 说明 本章是经历 ...

  4. JS实现定时器

    导出:jquery.timers-1.2.js jQuery Timers提供了三个函式 1. everyTime(时间间隔, [定时器名称], 函式名称, [次数限制], [等待函式程序完成])2. ...

  5. js 关于定时器的知识点。

    Js的同步和异步 同步:代码从上到下执行. 异步:每个模块执行自己的,同时执行. js本身就是同步的,但是需要记住四个地方是异步. Js的异步   1.定时器  2.ajax   3事件的绑定  4. ...

  6. 关于js中定时器的返回值问题

    在js中,我们常常会用到定时器来处理各种各样的问题,当我们需要清除定时器的时候,我们常常会定义一个值来接受定时器的返回值,然后再把定义好的这个值写到清除定时器的括弧后面,如: var times = ...

  7. js 面向对象 定时器 046

    获取DOM对象补充 document.getElementsByTagName('div'); //获取的多个DOM对象 这种对象叫伪数组 如果想遍历此对象 通过for(var i=0; i < ...

  8. 【笔记】js 关于定时器的理解

    总所周知 js 里面的 setTimeout() 方法是用来设定某些功能在某段时间间隔之后执行的.但是今天看了高程对定时器的描述发现并不是这样. setTimeout(function(){ //.c ...

  9. js之定时器

    一.通过定时器我们可以间隔设定时间重复调用某个函数,利用这个特性,我们可以做很多事,例如,12306上的每间隔5秒查询自动查询一次余票,简单动画的实现等等 二.定时器的格式: 定时器有两种格式,分别是 ...

  10. js清除定时器注意点

    如何这篇文章所述:https://www.cnblogs.com/mmykdbc/p/7418575.html js多次调用创建定时器的函数,会使定时器速度越来越快,多次调用定时器的使用场景比如:监听 ...

随机推荐

  1. rest_framework 认证功能

    from django.views import View from rest_framework.views import APIView from rest_framework.authentic ...

  2. @property 的本质是什么？

    将访问.变量.访问控制进行了绑定:编译器负责自动合成. @dynamic:不会自动合成成员变量和存取方法. @property 的本质是什么?@property = ivar + getter + s ...

  3. 解决mongodb TypeError: Cannot read property 'XXX' of null 问题

    有时候我们的字段里的数据为空而去查询就会报错. 比如以下形式: “cartList”:[] “cartList”:[{}] “cartList”:{} “cartList”:null 在查询的时候加上 ...

  4. 二叉查找树BST 模板

    二叉查找树BST 就是二叉搜索树 二叉排序树. 就是满足 左儿子<父节点<右儿子 的一颗树,插入和查询复杂度最好情况都是logN的,写起来很简单.   根据BST的性质可以很好的解决这些东 ...

  5. 洛谷 P1352 没有上司的舞会 (树上不相邻点权和最大)

    一颗树,选取不相邻的点,求最大点权值 因为当前结点选或不选后后效性,所以我们加一唯来取消后效性 表示以i为根的树且i不选的最大价值 表示以i为根的树且i选的最大价值 显然有 #include<c ...

  6. Node实现简单的注册时后端的MVC模型架构

    实现一个简单的注册界面后端MVC模型架构 第一步:在生成的express框架的app.js中添加一个路由,代码如下:var api = require('./routes/api'); app.use ...

  7. HDU 4862 Jump 费用流

    又是一个看了题解以后还坑了一天的题…… 结果最后发现是抄代码的时候少写了一个负号. 题意: 有一个n*m的网格,其中每个格子上都有0~9的数字.现在你可以玩K次游戏. 一次游戏是这样定义的: 你可以选 ...

  8. 熟悉Android开发不得不知道的技巧

    博客出自:http://blog.csdn.net/liuxian13183,转载注明出处! All Rights Reserved ! 1.用Eclipse插件将文件批量编码如GBK-UTF-8 用 ...

  9. 洛谷——P3374 【模板】树状数组 1

    https://www.luogu.org/problem/show?pid=3374 题目描述 如题,已知一个数列,你需要进行下面两种操作: 1.将某一个数加上x 2.求出某区间每一个数的和 输入输 ...

  10. oc数据类型分类

    OC数据类型能够分为 基本类型.构造类型.指针类型.空类型 基本类型可分为 整型.字符型.枚举型.浮点型(float类型.double类型) 构造类型可分为 数组类型.结构体类型.公用体类型 指针类型 ...