第61天：json遍历和封装运动框架（多个属性）
Posted 半指温柔乐
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了第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 里面有没有某个属性
var json = {name: "刘德华",age : 55};
// in 可以用用来判断 json 里面有没有某个属性
if("andy" in json)
{
console.log("yes"); // 返回的是 yes
}
else
{
console.log("no");
}
四、案例
1、返回当前样式的函数
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 div{ 8 width: 100px; 9 height: 200px; 10 position: absolute; 11 top:10px; 12 left:20px; 13 background-color: yellow; 14 z-index: 2; 15 opacity: 0.4; 16 } 17 </style> 18 </head> 19 <body> 20 <div id="demo"></div> 21 </body> 22 </html> 23 <script> 24 var demo=document.getElementById("demo"); 25 function getStyle(obj,attr){//谁的 属性 26 if(obj.currentStyle){ 27 return obj.currentStyle[attr];//ie 28 }else{ 29 return window.getComputedStyle(obj,null)[attr];//w3c 30 } 31 } 32 console.log(getStyle(demo,"width"));// 调用 width必须加引号 33 </script>
2、封装运动框架单个属性
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 div { 8 width: 100px; 9 height: 100px; 10 background-color: green; 11 position: absolute; 12 top: 50px; 13 left:0; 14 opacity: 0.5; 15 } 16 </style> 17 </head> 18 <body> 19 <button id="btn200">200</button> 20 <button id="btn400">400</button> 21 <div id="box"></div> 22 </body> 23 </html> 24 <script> 25 //获取CSS属性函数 26 function getStyle(obj,attr){//谁的 属性 27 if(obj.currentStyle){ 28 return obj.currentStyle[attr];//ie 29 }else{ 30 return window.getComputedStyle(obj,null)[attr];//w3c 31 } 32 }
33 var btn200 = document.getElementById("btn200"); 34 var btn400 = document.getElementById("btn400"); 35 var box = document.getElementById("box"); 36 btn200.onclick = function() { 37 animate(box,"width",500); 38 } 39 btn400.onclick = function() { 40 animate(box,"top",400); 41 } 42 43 //封装单个属性运动框架 44 function animate(obj,attr,target){ 45 clearInterval(obj.timer); 46 obj.timer=setInterval(function(){ 47 //计算步长 盒子本身的样式+步长 48 var current=parseInt(getStyle(obj,attr));//获取当前样式 调用getStyle 去掉px 49 var step=(target-current)/10; 50 step=step>0?Math.ceil(step):Math.floor(step); 51 //开始动画 52 obj.style[attr]=current+step+"px"; 53 if(current==target){ 54 clearInterval(obj.timer); 55 } 56 },30) 57 } </script>
3、封装运动框架多个属性
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 div { 8 width: 100px; 9 height: 100px; 10 background-color: green; 11 position: absolute; 12 top: 50px; 13 left:0; 14 opacity: 0.5; 15 border-radius: 50%; 16 } 17 </style> 18 </head> 19 <body> 20 <button id="btn200">200</button> 21 <button id="btn400">400</button> 22 <div id="box"></div> 23 </body> 24 </html> 25 <script> 26 27 28 var btn200 = document.getElementById("btn200"); 29 var btn400 = document.getElementById("btn400"); 30 var box = document.getElementById("box"); 31 btn200.onclick = function() { 32 animate(box,{width:500,top:200,left:400,opacity:40,zIndex:3},function(){alert("我来了")});//function()回调函数 33 } 34 btn400.onclick = function() { 35 animate(box,{top:200,left:200}); 36 } 37 38 //封装多个属性运动框架 39 function animate(obj,json,fn){ 40 clearInterval(obj.timer); 41 obj.timer=setInterval(function(){ 42 //开始遍历json 43 var flag=true;//判断是否停止定时器 一定写到遍历外面 44 for(var attr in json){//attr属性 json[attr]属性值 45 var current=0; 46 if(attr=="opacity"){ 47 current=parseInt(getStyle(obj,attr)*100)||0;//数值 48 }else{ 49 current=parseInt(getStyle(obj,attr));//数值 50 //console.log(current); 51 } 52 //console.log(current); 53 54 //目标位置就是属性值 55 var step=(json[attr]-current)/10;//步长=目标位置-当前位置/10 56 step=step>0?Math.ceil(step):Math.floor(step); 57 58 //判断透明度 59 if(attr=="opacity"){//判断用户有没有输入opacity 60 if("opacity" inJS完美运动框架