2017-03-19 JS 学习笔记

常见的取整函数的认识

• 向上取整函数
  如果是正数，那么向上取整得到的是绝对值大的
  如果是负数，那么向上取整得到的是绝对值小的
  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 采用实时垃圾内存回收，只要产生垃圾内存就会被回收
• 内存分栈区和堆区
• 栈区保存变量名称（指针），系统自动管理
• 堆区保存赋值型数据，不会自动管理，需要我们手动管理，管理方式有计数回收法，和标记回收法
• 数据主要两种，一般性数据类型，和引用型数据类型，前者保存在栈区，后者保存在堆区