zoukankan      html  css  js  c++  java
  • 正负值地处理以及添加回调函数小案例

    今天写一个简单的小例子,需求:页面有多个div,点击屏幕,div有顺序的依次下来。

    来看js代码:

    <script>
    
        window.onload=function(){
            //第一步先追加多个div
            var str="";
            var len=20;
    
            var aDiv=document.getElementsByTagName("div");
            var timer=null;
            var num=0;
            for(var i=0;i<len;i++){
                str+='<div style="50px;height:50px;background:#ff7e7e;position:absolute;left:'+i*60+'px;top:0;"></div>'
            }
            document.body.innerHTML=str;
            //添加点击事件
            var onOff=true;
            document.onclick=function(){
                clearInterval(timer);
                timer=setInterval(function(){
                    fn(aDiv[num],"top",18,500);
                    num++;
                    if(num===len){
                        clearInterval(timer);
                    }
                },100)
    
            };
            
            function fn(obj,attr,dir,target,endFn){
                clearInterval(obj.timer);//这里先要清除一下定时器是为了防止一直点击按钮,div一直加速
                //dir值是负责方向的,ta与目标值相比,若是为负数说明是往反方向的,而若为正数的话是往正方向的
                dir=parseInt(getStyle(obj,attr))<target?dir:-dir;
                //开启定时器,假定让其等于目标值的时候,停止下来
                obj.timer=setInterval(function(){
                    var speed=parseInt(getStyle(obj,attr)) + dir; //这里的left也是可以作为参数传递过来的
    
                    if( speed > target && dir>0 || speed < target && dir<0){
                        speed = target
                    }
    
                    obj.style[attr]= speed +"px";
    
                    if( speed == target){
                        clearInterval(obj.timer);
                        //移动到第一个目标值的时候,让其换目标移动,因此要在这里调用一下函数
                        endFn && endFn();//这个写法就等于if(endFn){ endFn()},也就是当endFn不是未定义的时候就调用endFn
                    }
    
                },50)
    
            }
    
        };
        //兼容不同浏览器获取行间样式
        function getStyle ( obj, attr ) {
            return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle( obj )[attr];
        }
    
    </script>

     效果图如下:

    好了,今天就这样!

  • 相关阅读:
    【git】------git开发过程中的使用流程------
    js原型链的深度理解!
    mvc框架模式
    node环境下express路由,
    前后端 分离及不分离
    node中间件概念
    JS-------DOM0级事件处理和DOM2级事件处理-------简单记法
    call、apply、bind的区别
    移动端Click300毫秒点击延迟
    JS 详解 Cookie、 LocalStorage 与 SessionStorage
  • 原文地址:https://www.cnblogs.com/web001/p/8094693.html
Copyright © 2011-2022 走看看