定时器应用-最终版
根据上一个实例，做到灵活应用和代码复用，把参数大部分改为形参形式传进来。
代码如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } #box1{ width: 100px; height: 100px; background: red; /*因为在IE浏览器中如果没有指定的值，就默认auto，所以我们需要先指定一个值*/ position: absolute; left: 0; } #box2{ width: 100px; height: 100px; background: red; /*因为在IE浏览器中如果没有指定的值，就默认auto，所以我们需要先指定一个值*/ position: absolute; left: 0; top: 200px; } </style> <script type="text/javascript" src="../js/tools.js"></script> <script type="text/javascript"> window.onload = function(){ /* * 假如我们创建多个按钮来同时控制多个div移动的话，但是每次都是点击后，就关闭上一个定时器标识 * 所以点击第一个div移动后再点击第二个div移动的时候，第一个div就会停下来了，因为关闭了上一个定时器的标识了。 * 目前我们的定时器的标识由全局变量timer保存。 * 所有的执行正在执行的定时器都在这个变量中保存。 * 那么所要操作的就是把timer变成对象自己的就可以了，给timer添加一个这样子的属性就好了。 * 就不需要定义一个全局的timer了。 */ // var timer; box1 = document.getElementById("box1"); box2 = document.getElementById("box2"); btn = document.getElementById("btn"); btn01 = document.getElementById("btn1"); btn02 = document.getElementById("btn2"); test = document.getElementById("test"); btn.onclick = function(){ move(box1,800,10,'left'); } btn01.onclick = function(){ move(box1,0,10,'left'); } btn02.onclick = function(){ move(box2,800,10,'left'); }; test.onclick = function(){ // move(box2,800,10,'width'); // move(box2,800,10,'top'); move(box2,800,10,'height',function(){ move(box2,800,10,'width'); }); } //获取元素的值 function getStyle(obj,name){ if(window.getComputedStyle){ return getComputedStyle(obj,null)[name] } else{ return obj.currentStyle[name] } } //需求是点击button，div就一直往左移动 /* * 如果存在多个按钮的话，不能直接复制太多重复的代码，希望可以复用代码， * 所以需要写一个移动的函数来操作 * 参数： * obj:哪个按钮 * attr:要执行动画的样式，比如：left top width，height * target：移动停止的阈值 * speed ：移动的速度，如果为正则向右移动，为负则向左移动 * 但是每次move都要传正负，不太好，希望程序自己可以判断 * 判断速度的正负值 * 如果从0向800移动，则speed为正 * 如果从800向0移动，则speed为负 * * attr width top hegiht left * * 回调函数 callback 动画执行完毕后执行。比如说执行向左还想执行向右，那就需要根据回调函数执行 */ function move(obj,target,speed,attr,callback){ //清除上一个定时器 clearInterval(obj.timer); //开启一个定时器，用来执行动画效果 //向执行动画的对象中添加一个timer属性，用来半寸它自己的定时器的标识。 obj.timer = setInterval(function(){ //获取box1原来的left值，通过复用的函数去获取,parseInt是把字符串的数字部分转换为number var oldlvalue = parseInt(getStyle(obj,attr)); //判断是向左还是向右 if(oldlvalue>target){ speed = -speed; } newvalue = oldlvalue + speed; /* * 判断newvalue是否大于800 * 从800向0移动 * 向左移动时，需要判断newvalue是否小于target * 向右移动时，需要判断newvalue是否大于target */ if((speed>0&&newvalue>target) || (speed<0&&newvalue<target)){ newvalue = target; } obj.style[attr] = newvalue + "px"; /* * 控制移动的位置，当800px时，就停止移动 */ if(newvalue === target){ clearInterval(obj.timer); callback && callback() } },300) } } </script> </head> <body> <button id="btn">点击div向右移动</button> <button id="btn1">点击div向左移动</button> <button id="btn2">点击div2向右移动</button> <button id="test">测试按钮</button> <br /><br /> <div id="box1"></div> <div id="box2"></div> <br /> </body> </html>
这里的js是一个内部的js，做到多人应用，需要提取到外部js
新建一个tools.js
//需求是点击button，div就一直往左移动 /* * 如果存在多个按钮的话，不能直接复制太多重复的代码，希望可以复用代码， * 所以需要写一个移动的函数来操作 * 参数： * obj:哪个按钮 * attr:要执行动画的样式，比如：left top width，height * target：移动停止的阈值 * speed ：移动的速度，如果为正则向右移动，为负则向左移动 * 但是每次move都要传正负，不太好，希望程序自己可以判断 * 判断速度的正负值 * 如果从0向800移动，则speed为正 * 如果从800向0移动，则speed为负 * * attr width top hegiht left * * 回调函数 callback 动画执行完毕后执行。比如说执行向左还想执行向右，那就需要根据回调函数执行 */ function move(obj,target,speed,attr,callback){ //清除上一个定时器 clearInterval(obj.timer); //开启一个定时器，用来执行动画效果 //向执行动画的对象中添加一个timer属性，用来半寸它自己的定时器的标识。 obj.timer = setInterval(function(){ //获取box1原来的left值，通过复用的函数去获取,parseInt是把字符串的数字部分转换为number var oldlvalue = parseInt(getStyle(obj,attr)); //判断是向左还是向右 if(oldlvalue>target){ speed = -speed; } newvalue = oldlvalue + speed; /* * 判断newvalue是否大于800 * 从800向0移动 * 向左移动时，需要判断newvalue是否小于target * 向右移动时，需要判断newvalue是否大于target */ if((speed>0&&newvalue>target) || (speed<0&&newvalue<target)){ newvalue = target; } obj.style[attr] = newvalue + "px"; /* * 控制移动的位置，当800px时，就停止移动 */ if(newvalue === target){ clearInterval(obj.timer); callback && callback() } },300) } //获取元素的值 function getStyle(obj,name){ if(window.getComputedStyle){ return getComputedStyle(obj,null)[name] } else{ return obj.currentStyle[name] } }
应用的时候只要引入就可以了
<script type="text/javascript" src="../js/tools.js"></script>
