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

最新推荐文章于 2024-10-10 14:55:26 发布

梦想创业俱乐部

最新推荐文章于 2024-10-10 14:55:26 发布

阅读量3k

点赞数 1

分类专栏： javascript 文章标签： javascript 梦想创业俱乐部前端js学习定时器的管理函数封装

本文链接：https://blog.csdn.net/chenminglvming/article/details/51100610

版权

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

摘要由CSDN通过智能技术生成

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];};

function $(a){
   if(typeof a === 'function'){
       window.onload = a;
   }else if(typeof a === 'object'){
       return a;
   }else if(typeof a ===