11.29setInterval

形参,实参

形参:形式参数//fn(a,b,c)
实参:实际参数//fn(1,2,3);
arguments:实参的集合;是数组形式;与定义的形参无关;

<script>
        function fn(a,b){
            console.log(arguments);
        }
        fn('a',1,5,3);
    </script>
//打印["a", 1, 5, 3] 

当参数不固定时:

<script>
        function fn(a,b){
            var num=0;
            for(var i=0;i<arguments.length;i++){
                num+=arguments[i];
            }
            return num;
        }
        console.log(fn(3,1,5,3,3,3));//18;
        console.log(fn(3,1,3,3));//10
    </script>

运算符不同时:

<script>
    function fn(){
        var num=arguments[0];
        if(arguments[arguments.length-1]=='+'){
            for(var i=1;i<arguments.length-1;i++){
                num+=arguments[i];
            }   
        }else{
            for(var i=1;i<arguments.length-1;i++){
                num-=arguments[i];
            }
        }
        return num;
    }
    alert(fn(1,2,3,'+'));//6
    alert(fn(10,2,3,'-'));//5
</script>

setInterval

setInterval(function(){},1000);//通过累加间距来达到动画效果;
与getComputedStyle(obj).width一起使用;//获取当前的宽、、、
里面可以加回调函数,先执行left,在top;
不是能用for循环;

computed//计算后;得到的是一个字符串;

getComputedStyle(obj).width //标准浏览器下;
obj.currentStyle.width //ie浏览器下;current:当前的

获取样式,制作动画效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
            width:100px;
            height:100px;
            background:#f10180;
            position:absolute;
            top:60px;
            left:10px;
        }
    </style>
</head>
<body>
    <div></div>
    <button>移动</button>
    <script>
        var oDiv=document.getElementsByTagName('div')[0];
        var oBtn=document.getElementsByTagName('button')[0];
        var timer=false;
        // oDiv.onclick=function(){
        //  var width=getComputedStyle(oDiv).width;
        //  width=parseInt(width);
        //  oDiv.style.width=width+10+'px';
        // }
        // oBtn.onclick=function(){
        //  var left=getComputedStyle(oDiv).left;
        //  left=parseInt(left);
        //  oDiv.style.left=left+10+'px';
        // }
    oBtn.onclick=function(){        
        if(!timer){
            domove(oDiv,'top',608);//timer为false时
        }else{
            clearInterval(timer);//timer为true时;清除定时器
            timer=false;
        }
    }       
    function domove(obj,attr,taget){//封装函数
        var position=getComputedStyle(obj)[attr];
        position=parseInt(position);
            timer=setInterval(function(){
            position+=10;
            if(position>taget){
                position=taget;             
            }
            obj.style[attr]=position+'px';
            if(position==taget){
                clearInterval(timer);//清除定时器
            }
        },100);     
    }
    </script>
</body>
</html>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • JavaScript 将字符串转换为数字 parseInt() ◆只保留数字的整数部分,不会进行四舍五入运算。 ...
    AkaTBS阅读 4,545评论 0 9
  • 原文: https://github.com/ecomfe/spec/blob/master/javascript...
    zock阅读 8,653评论 2 36
  • 常见的取整函数的认识 向上取整函数如果是正数,那么向上取整得到的是绝对值大的如果是负数,那么向上取整得到的是绝对值...
    GodlinE阅读 949评论 0 0
  • 整理下我在面试的时候所遇到的一些问题,想到哪里就更新到哪里.(ps:不定期更新~) Q1.请说出css选择器ul>...
    Snowxin阅读 4,050评论 0 6