美文网首页
2017-03-19 JS 学习笔记

2017-03-19 JS 学习笔记

作者: GodlinE | 来源:发表于2017-03-20 14:28 被阅读0次

    常见的取整函数的认识

    • 向上取整函数
      如果是正数,那么向上取整得到的是绝对值大的
      如果是负数,那么向上取整得到的是绝对值小的
      Math.ceil()
    • 向下取整函数
      如果是正数,那么向下取整得到的是绝对值小的
      如果是负数,那么向下取整得到的是绝对值大的
      Math.floor()

    缓动动画的补丁

    • 一般对于缓动动画,我们速度一般是小数,所以永远得不到对应的 target 值
      所以我们要取整,但是取的是绝对值大的那个
    var speed = Math.ceil((target - begin)*0.2);
    

    缓动动画的封装

    fucntion buffer(obj,target){
              clearInterval(obj.timer);
              obj.timer = setInterval(function(){
                  begin = box.offsetLeft;
                  var speed = target > begin?Math.ceil((target - begin)*0.2):Math.floor((target - begin)*0.2);
                  obj.style.left = begin + speed + 'px';
                  if(begin == target){
                      clearInterval(obj.timer);
                      }
            },20)
    }
    

    获取某个标签的初始值

    • 通过 style 获取不了页内样式的值
      但是可以获取行内样式的值
    • 获取页内样式的值
      ie box.currentStyle.width
      一般浏览器window.getComputedStyle(boxm,null).width
    • 获取某个标签标签样式的值,是一个功能,所以我们抽取一个函数,其中 obj 表示获取哪一个标签, attr 表示抽取哪一个属性
    function getCssAttr(obj,attr){
            if(obj.currentStyle){
                    return obj.currentStyle[attr];
            }else{
                    return window.getComputedStyle(obj,null)[attr];
            }
    }
    //对于属性如果用点语法访问不到就用[]来访问
    

    封装单值动画

    function buffer(obj,target,attr){
            clearInterval(obj.timer);
            obj.timer = setInterval(function(){
                      var begin = parsetInt(getCssAttr(obj,attr)) || 0;
                      var speed = target > begin?Math.ceil((target - begin)*0.2):Math.floor((target - begin)*0.2);
                      obj.style[attr] = begin + speed + 'px';
                      if(begin  == target){
                          clearInterval(obj.timer);
                          }
            },20)
    }
    

    封装多值动画

    
    function buffer(obj,json){
            clearInterval(obj.timer);
            obj.timer = setInterval(function(){
            var flag = true;
            for(var key in json){
                 var begin = parseInt(getCssAttr(obj,key)) || 0;
                 var target = parseInt(json[key]);
                  var speed = target > begin ? Math.ceil((target - begin)*0.2) : Math.floor((target - begin)*0.2);
                  obj.style[key] = begin + speed + 'px';
                  if(begin != target){
                   flag = false;
                  }                           
            }
            if(flag == true){
                clearInterval(obj.timer);
            }
        },20)
    }
    //只要有一个值达到了 begin == target 条件时,计时器就会停止,所以不能保证所有的值同时到达,但是我们需要他们同时到达,所以需要加节流器 var flag
    

    封装多值动画的回调

    • 为了达到结束一个动画然后再开始一个新的动画目的,我们需要监听动画结束,然后回调自身,在形参里加函数
    buffer(box,{width:800,height:300},function(){
            buffer(box,width:100,height:300)
    });
    function buffer(obj,json,fn){
            clearInterval(obj.timer);
            obj.timer = setInterval(function(){
            var flag = true;
            for(var key in json){
                 var begin = parseInt(getCssAttr(obj,key)) || 0;
                 var target = parseInt(json[key]);
                  var speed = target > begin ? Math.ceil((target - begin)*0.2) : Math.floor((target - begin)*0.2);
                  obj.style[key] = begin + speed + 'px';
                  if(begin != target){
                   flag = false;
                  }                           
            }
            if(flag == true){
                clearInterval(obj.timer);
                if(fn){
                    fn();
                }
            }
        },20)
    }
    

    缓动动画的多值动画其他需要动画属性设置

     function  buffer(obj,json,fn){
    
                clearInterval(obj.timer);
    
                obj.timer = setInterval(function(){
    
    
                    /*设置一个值用来表示是否清空定时器*/
                    var flag = true;
    
                    var begin = 0;
                    var target = 0;
    
    
                    /*设置多个值,要遍历字典*/
                    for(var key in json){
    
                        /*对于opcity类似的值,我们通过现在的代码没法设置对应的值
                        * 我们区别对待,要在取出值的时候和设置值的时候都有重新设置*/
    
                        if('opacity' == key){
                            begin = parseInt( parseFloat(getCssAtt(obj,key))*100)||100;
                            target = parseInt(json[key]*100) ;
                        }else {
                             begin = parseInt(getCssAtt(obj,key))||0;
                             target = parseInt(json[key]) ;
                        }
                        var speed = target > begin ?Math.ceil((target - begin)*0.2):Math.floor((target - begin)*0.2);
                        /**/
                        if ('opacity' == key){
                            /*普通浏览器*/
                            obj.style.opacity =( begin + speed)/100;
                            /*ie浏览器*/
                            obj.style.filter = 'alpha(opacity:'+(begin + speed)+')';
    
                        }else  if ('zIndex'== key){
                            obj.style.zIndex = json[key];
                        }
                        else {
                            obj.style[key] = begin +speed +'px';
                        }
                        /*只要有一个值,到达对应目标值,就会停止定时器,所以不能保证所有的值同时到达,但是我们需要让他同时到达*/
                        if (begin != target){
                            flag = false;
                        }
                    }
                    if(flag == true){
                        /*回调:就是表示当上一次动画完成后,我们要做的事情*/
    
                        clearInterval(obj.timer);
                        /*一般为了严格,我们需要判断这个函数是否实现,如果实现我们采取调用
                        * 如果没有实现就不调用*/
                        if(fn){
                            fn();
                        }
                    }
                },20)
    }
    

    楼层效果的实现

    
    <script>
        window.onload = function(){
            /*1.获取标签*/
            var oul = document.getElementById('ul');
            var ol = document.getElementById('ol');
            var oulis = oul.children;
            var olis = ol.children;
    
            /*1.0设置值用来记录是否点击了ol中li*/
            var isClick = false;
            /*2.设置颜色*/
            /*2.1用来记录颜色*/
            var bgColors = ['red','blue','purple','green','pink'];
            for(var i = 0;i < oulis.length;i++){
                oulis[i].style.background = bgColors[i];
            }
            /*3.当点击ol中的li的时候,让对应的ul中的li滚动*/
    
            /*当点击的时候,会触发对应动画,在动画中我们设置scroll,但是在scroll中会触发
            * winodow.onscroll方法,所以在这个方法中我们会重新设置每一个ol中的li的位置
            * 所以出先来回晃动的现象,
            * 解决:点击的时候触发动画的期间不要触发滚动事件中设置ol中li的位置的代码*/
            for(var i = 0;i < olis.length;i++){
    
                olis[i].index = i;
    
                olis[i].onclick = function(){
                    isClick = true;
                    /*3.1切换不同的ol中的位置,就是排他*/
                    for(var j = 0;j < olis.length;j ++){
                        olis[j].className = '';
                    }
                    olis[this.index].className = 'curr';
    
                    /*3.2让对应的ul中li动起来*/
                    var screenH = client().height *this.index ;
                    /*动画结束后要设置对应的点击为false*/
                    buffer(document.body,{scrollTop: screenH},function(){
                        isClick = false;
                    });
    
                }
            }
    
            /*4.当滚动的时候了,让对应的ol中选项发生变化*/
            window.onscroll = function(){
    
                /*4.1判断滚动的距离和每一个ul中li的offset值比较,如果大于对应的offset值
                * 就让对应的ol中的li发生变化*/
                /*4.11获取滚动的距离*/
    
                /*4.12如果没有点击就执行代码*/
                if(!isClick){//表示没有点击,没有触发点击的动画
    
    
                    var myStop = scroll().top;
                    for(var i = 0;i < oulis.length;i++){
                        var myOffTop = oulis[i].offsetTop;
                        if(myStop>=myOffTop){
                            /*就是设置排他*/
                            for(var j  = 0;j <olis.length;j ++ ){
                                olis[j].className = '';
                            }
                            olis[i].className = 'curr';
                        }
                    }
                }
    
            }
    
        }
    </script>
    

    音乐导航的实现

    <script>
        window.onload = function(){
            /*1.获取标签*/
            var oul = document.getElementById('ul');
            var lis = oul.children;
            /*2.设置每一个li的图片*/
            for(var i = 0;i < lis.length;i ++){
                if (i == 0){
                    lis[i].style.backgroundPosition = '0 0';
                }else
                {
                   lis[i].style.backgroundPosition = '0'+ i *-40 + 'px';
                }
            }
            /*3.当移动到li上的时候设置让span出现,而且显示音乐*/
            for(var i = 0;i < lis.length;i++){
                lis[i].onmouseover = function(){
    
                    /*采用缓动动画让对应的span出现*/
                    buffer(this.children[1],{top:0});
    
                    /*开始音乐*/
                    this.children[2].play();
                    this.children[2].currentTime = 0;
                }
                lis[i].onmouseout = function(){
                    buffer(this.children[1],{top:40});
                }
            }
    
            /*4.当点击键盘的时候触发音乐*/
            /*一般键盘事件由最大事件源触发*/
            document.onkeydown = function(event){
                /*4.1获取keyCode值*/
    
                /*想要获取keyCode值,需要通过事件对象*/
                var event = event ||window.event;
                 var myKeyCode = event.keyCode - 49;
    
                /*4.2设置对用li中span显示以及设置对应音乐响起来*/
                buffer(lis[myKeyCode].children[1],{top:0},function(){
                    buffer(lis[myKeyCode].children[1],{top:40});
                });
    
                /*4.3设置音乐*/
                lis[myKeyCode].children[2].play();
                lis[myKeyCode].children[2].currentTime = 0;
    
            }
    
        }
    </script>
    
    
    • 获取 keyCode 值,有 keyCode 表
      需要通过事件对象获取event.keyCode

    内存管理

    • JS 和 Java 采用垃圾内存回收,回定时清除垃圾内存,因此,会造成垃圾内存堆积
    • iOS 采用实时垃圾内存回收,只要产生垃圾内存就会被回收
    • 内存分栈区和堆区
    • 栈区保存变量名称(指针),系统自动管理
    • 堆区保存赋值型数据,不会自动管理,需要我们手动管理,管理方式有计数回收法,和标记回收法
    • 数据主要两种,一般性数据类型,和引用型数据类型,前者保存在栈区,后者保存在堆区

    相关文章

      网友评论

          本文标题:2017-03-19 JS 学习笔记

          本文链接:https://www.haomeiwen.com/subject/fisbnttx.html