<!DOCTYPE?html>
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<title>Title</title>
????<script>
?function?getStyle(obj,attr){
?????if?(obj.currentStyle){
?????????return?obj.currentStyle[attr];
?????}else{
????????return?window.getComputedStyle(obj,null)[attr];
?????}
?}
?function??animate_arg(obj,json,speed){
?????for(var?attr?in?json){
???var?current?=?parseInt(getStyle(obj,attr));
???console.log(attr);
?????console.log(typeof(attr));
?????//比如此處傳josn{top:500}進來的時候console.log(attr)就是輸出top，那下面attr.step?json的值傳進來就會生成相應的
?????//width.step,height.step,left.step?但是我實際我attr.step得到的是個未定義的。
?????attr.step?=?json[attr]>current???speed?:?-speed;
?????console.log(typeof(attr.step));
?????
?????attr.timer?=?setInterval(function(){
???var?current?=?parseInt(getStyle(obj,attr));
?????var?result?=?Math.abs(json[attr]?-?current);
?????????if?(result?<=?speed){
?????????obj.style[attr]=json[attr];
?????????}else{
?????????obj.style[attr]=?current?+?attr.step?+?"px";
?????????}
????},30)
???}
??}
???window.onload=function(){
?????var?btn200?=?document.getElementById("btn200");
?????var?btn400?=?document.getElementById("btn400");
?????var?box?=?document.getElementById("box");
?????btn200.onclick?=?function()?{
?????????animate_arg(box,{width:?200,?top:?800,left:?200},10);
?????};
?????btn400.onclick?=?function()?{
????????animate_arg(box,{top:500},10);
??????}
???}
????</script>
????<style>
?????????div?{
?????????????width:?100px;
?????????????height:?100px;
?????????????background-color:?pink;
?????????????position:?absolute;
?????????????left:?0;
?????????????top:?50px;
?????????????border-radius:?50%;
?????????}
????</style>
</head>
<body>
????<button?id="btn200">200</button>
????<button?id="btn400">400</button>
????<div?id="box"></div>
</body>
</html>
使用JS 遍歷 json時遇到的問題。attr.step為什么是undefined。
地獄快車_666
2016-08-24 14:28:45
