第61天：json遍历和封装运动框架（多个属性）

一、json 遍历

for in 关键字

for ( 变量 in 对象)

{ 执行语句; }

例如：

var json = {width:200,height:300,left:50}
console.log(json.width);
for(var k in json)
{
console.log(k); // k 遍历的是json 可以得到的是属性
console.log(json[k]); // json[k] 得到是属性的值
}

二、回调函数

等动画执行完毕再去执行的函数回调函数

很简单当定时器停止了。动画就结束了

三、 in 运算符

in运算符也是一个二元运算符。in运算符要求第1个（左边的）操作数必须是字符串类型或可以转换为字符串类型的其他类型，而第2个（右边的）操作数必须是数组或对象。只有第1个操作数的值是第2个操作数的属性名，才会返回true，否则返回false

// in 可以用用来判断 json 里面有没有某个属性

四、案例

1、返回当前样式的函数

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         div{

             width: 100px;

             height: 200px;

             position: absolute;

             top:10px;

             left:20px;

             background-color: yellow;

             z-index: 2;

             opacity: 0.4;

         }

     </style>

 </head>

 <body>

 <div id="demo"></div>

 </body>

 </html>

 <script>

     var demo=document.getElementById("demo");

     function getStyle(obj,attr){//谁的   属性

         if(obj.currentStyle){

             return obj.currentStyle[attr];//ie

         }else{

         return window.getComputedStyle(obj,null)[attr];//w3c

         }

     }

     console.log(getStyle(demo,"width"));// 调用 width必须加引号

 </script>

2、封装运动框架单个属性

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

     <style>

         div {

             width: 100px;

             height: 100px;

             background-color: green;

             position: absolute;

             top: 50px;

             left:0;

             opacity: 0.5;

         }

     </style>

 </head>

 <body>

 <button id="btn200">200</button>

 <button id="btn400">400</button>

 <div id="box"></div>

 </body>

 </html>

 <script>

     //获取CSS属性函数

     function getStyle(obj,attr){//谁的   属性

         if(obj.currentStyle){

             return obj.currentStyle[attr];//ie

         }else{

             return window.getComputedStyle(obj,null)[attr];//w3c

         }

     }

     var btn200 = document.getElementById("btn200");

     var btn400 = document.getElementById("btn400");

     var box = document.getElementById("box");

     btn200.onclick = function() {

         animate(box,"width",500);

     }

     btn400.onclick = function() {

         animate(box,"top",400);

     }

     //封装单个属性运动框架

     function animate(obj,attr,target){

         clearInterval(obj.timer);

         obj.timer=setInterval(function(){

             //计算步长 盒子本身的样式+步长

             var current=parseInt(getStyle(obj,attr));//获取当前样式 调用getStyle 去掉px

             var step=(target-current)/10;

             step=step>0?Math.ceil(step):Math.floor(step);

             //开始动画

             obj.style[attr]=current+step+"px";

             if(current==target){

                 clearInterval(obj.timer);

             }

         },30)

     }

</script>

3、封装运动框架多个属性

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

     <style>

         div {

             width: 100px;

             height: 100px;

             background-color: green;

             position: absolute;

             top: 50px;

             left:0;

             opacity: 0.5;

             border-radius: 50%;

         }

     </style>

 </head>

 <body>

 <button id="btn200">200</button>

 <button id="btn400">400</button>

 <div id="box"></div>

 </body>

 </html>

 <script>

     var btn200 = document.getElementById("btn200");

     var btn400 = document.getElementById("btn400");

     var box = document.getElementById("box");

     btn200.onclick = function() {

         animate(box,{width:500,top:200,left:400,opacity:40,zIndex:3},function(){alert("我来了")});//function()回调函数

     }

     btn400.onclick = function() {

         animate(box,{top:200,left:200});

     }

     //封装多个属性运动框架

     function animate(obj,json,fn){

         clearInterval(obj.timer);

         obj.timer=setInterval(function(){

             //开始遍历json

             var flag=true;//判断是否停止定时器 一定写到遍历外面

             for(var attr in json){//attr属性  json[attr]属性值

                 var current=0;

                 if(attr=="opacity"){

                      current=parseInt(getStyle(obj,attr)*100)||0;//数值

                     }else{

                      current=parseInt(getStyle(obj,attr));//数值

                     //console.log(current);

                 }

                 //console.log(current);

                 //目标位置就是属性值

                 var step=(json[attr]-current)/10;//步长=目标位置-当前位置/10

                 step=step>0?Math.ceil(step):Math.floor(step);

                 //判断透明度

                 if(attr=="opacity"){//判断用户有没有输入opacity

                     if("opacity" in obj.style){//判断浏览器是否支持opacity

                         obj.style.opacity=(current+step)/100;//W3C

                     }else{

                         obj.style.filter="alpha(opacity="+(current+step)+")";//IE

                     }

                 }else if(attr=="zIndex"){//判断层级

                         obj.style.zIndex=json[attr];

                 }

                 else{

                     obj.style[attr]=current+step+"px";

                 }

                 //判断什么时候停止定时器

                 if(current!=json[attr]){//只要其中一个不满足条件 就不应该停止定时器

                     flag=false;

                 }

             }

             if(flag){//用于判断定时器的条件

                 clearInterval(obj.timer);

                 if(fn){//定时器停止就是动画结束了 再执行fn

                     fn();//调用函数

                 }

             }

         },30)

     }

     //获取CSS属性函数

     function getStyle(obj,attr){//谁的   属性

         if(obj.currentStyle){

             return obj.currentStyle[attr];//ie

         }else{

             return window.getComputedStyle(obj,null)[attr];//w3c

         }

     }

 </script>

3、仿360开机效果

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title>仿360开机效果</title>

     <style>

         .box{

             width: 322px;

             position: fixed;

             bottom:0;

             right:0;

         }

         span{

             position: absolute;

             top:0;

             right:0;

             width:30px;

             height: 20px;

             cursor: pointer;

         }

     </style>

 </head>

 <body>

 <div class="box" id="box">

     <span></span>

     <div class="hd" id="t">

         <img src="data:images/t.jpg" alt=""/>

     </div>

     <div class="bd" id="b">

         <img src="data:images/b.jpg" alt=""/>

     </div>

 </div>

 </body>

 </html>

 <script>

     var b=document.getElementById('b');

     var closeAd=document.getElementsByTagName("span")[0];

     closeAd.onclick=function(){

         animate(b,{height:0},function(){

             animate(b.parentNode,{width:0},function(){alert(11)})

         })

     }

     //封装多个属性运动框架

     function animate(obj,json,fn){

         clearInterval(obj.timer);

         obj.timer=setInterval(function(){

             //开始遍历json

             var flag=true;//判断是否停止定时器 一定写到遍历外面

             for(var attr in json){//attr属性  json[attr]属性值

                 var current=parseInt(getStyle(obj,attr));//数值

                 //目标位置就是属性值

                 var step=(json[attr]-current)/10;//步长=目标位置-当前位置/10

                 step=step>0?Math.ceil(step):Math.floor(step);

                 obj.style[attr]=current+step+"px";

                 //console.log(current);

                 if(current!=json[attr]){//只要其中一个不满足条件 就不应该停止定时器

                     flag=false;

                 }

             }

             if(flag){//用于判断定时器的条件

                 clearInterval(obj.timer);

                 if(fn){//定时器停止就是动画结束了 再执行fn

                     fn();//调用函数

                 }

             }

         },30)

     }

     //获取CSS属性函数

     function getStyle(obj,attr){//谁的   属性

         if(obj.currentStyle){

             return obj.currentStyle[attr];//ie

         }else{

             return window.getComputedStyle(obj,null)[attr];//w3c

         }

     }

 </script>

运行效果：