js第九节-定时器的管理，函数封装

最新推荐文章于 2024-09-26 22:29:40 发布

原创

最新推荐文章于 2024-09-26 22:29:40 发布 · 3.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #梦想创业俱乐部 #前端js学习 #定时器的管理 #函数封装

本文主要介绍了JavaScript中定时器的管理与函数封装，包括元素移动、获取元素样式、图片震动的函数实现，并提供了作业讲解，如点击加分效果和图片自动切换的代码示例。

js第九节-定时器的管理，函数封装

一、函数的封装

1.元素移动的函数封装

//封装函数-->让某某对象自动移动到某位置的封装函数
//obj-->传入的对象 attr-->传入的是属性值 dir-->步进值 target-->移动到指定位置的值 //endFn-->有没有回调函数。注意：前进时target一定是大于dir的，后退则一定是小于target的
function turnDir(obj,attr,dir,target,endFn){
//+20 > 900
//-20 < 10
   //dir = parseInt(getStyle(obj,attr)) < target ? dir : -dir;
   clearInterval(obj.timer);
   obj.timer = setInterval(function(){
   var speed = parseInt(getStyle(obj,attr));
   speed = speed + dir;

   if(dir >= 0 && speed > target){
           speed = target;
   }
   if(dir < 0 && speed < target){
           speed = target;
   }

   obj.style[attr] = speed + 'px';

   if(speed == target ){
      //alert(getStyle(obj,attr));
      clearInterval(obj.timer);
   /* if(endFn){
       endFn();
      }*/
      endFn && endFn();
   }
   },30);
};

2.获取元素的样式的函数封装

//属性的调用
//obj-->传入的对象 attr-->传入的是属性值
function getStyle(obj,attr){
return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle( obj,100)[attr];};