0

这是我面临的问题 - 我有一个名为 ('myDiv') 的 div。我设置了一个 setInterval 函数，它每 2 秒运行一次。我想要的是每次执行 setInterval 时，我都想额外旋转 div '15deg'。

我几乎做到了。但是当我做一些字符串操作时，它就出错了。//这里是代码。

//css 转换所需的值 = 15ddeg 而不是 '15deg' 那么如何将 '15deg' 提取到 15deg（没有 qoute）

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-git2.js"></script>
<meta charset=utf-8 />
<script>

      $(function(){
        var foo = setInterval('animateDiv()', 2000);
    var count = 15;

    function animateDiv(){
       //console.log(count);

    count += 10;

       $('.myDiv').css({'-webkit-transform':'rotate(count + "deg")'});

      //console.log(count + "deg");
    }
      });

</script> 
<title>JS Bin</title>
</head>
<body>
  <div class='myDiv'></div>
</body>
</html>
4

6 回答 6

1

http://jsfiddle.net/RWQSC/

(function(){
        var intId = setInterval(animateDiv, 2000),
            count = 15,
            $myDiv = $('.myDiv'); //Cache the div so we don't keep looking though the DOM for the same element. 

    function animateDiv(){
       console.log(count);
       count += 10;
       $myDiv.css({'-webkit-transform':'rotate(' + count +'deg)'});
       //console.log(count + "deg");
    }

}());
于 2013-08-13T01:08:39.247 回答
1

两个问题，

首先，设置你的转换，你实际上是在值字符串中使用字符串'count'，你需要将值count连接到字符串而不是仅仅使用字符串：

$('.myDiv').css({'-webkit-transform':'rotate('+count+'deg)'});

其次，您收到一个 JavaScript 控制台错误，它找不到函数animateDiv，因为您的函数不是全局函数，并且实际上在 on-load 事件中，您无法通过字符串名称找到它，而是尝试直接传入函数（注意，不要包含括号，我们不想调用函数，我们只是将其分配为参数）：

var foo = setInterval(animateDiv, 2000);
于 2013-08-13T01:18:35.613 回答
0

我不明白你的问题，但你可以这样做

var index = deg.indexOf('\'');
var LastIndex = deg.LastIndexOf('\'');
deg = deg.substring(index+1,LastIndex);
于 2013-08-13T01:01:57.307 回答
0

这似乎有效：

function animateDiv() {
    // console.log(count);

    count += 10;

    $('.myDiv').css({
        '-webkit-transform': 'rotate(' + count + 'deg)'
    });

    //console.log(count + "deg");
}

var count = 15;
var foo = setInterval(animateDiv, 500);

jsFiddle

于 2013-08-13T01:08:54.457 回答
0

小提琴！

var count = 15;

function animateDiv(){
    count += 10;
    $('#myDiv').css({'-webkit-transform': 'rotate(' + count + 'deg)'});
    console.log('rotate(' + count + 'deg)');
}

var foo = setInterval(animateDiv, 2000);
于 2013-08-13T01:09:04.010 回答
-2

如果你想要最大的速度，你不应该使用 jQuery，你应该将你的元素缓存在animateDiv.

并且永远不要将setInterval/setTimeout与字符串一起使用，因为那样他们就会使用魔鬼eval！

var el = document.getElementsByClassName('myDiv')[0],
    count = 15,
    foo = setInterval(animateDiv, 2000);
function animateDiv(){
    count += 10;
    el.style.transform = 'rotate('+count + 'deg)';
}

演示：http: //jsfiddle.net/thdyL/1/

编辑：

如果你想进一步提高速度（但你会失去可读性），你也可以使用

var style = document.getElementsByClassName('myDiv')[0].style,
    count = 15,
    foo = setInterval(animateDiv, 2000);
function animateDiv(){
    style.transform = 'rotate('+ (count += 10) + 'deg)';
}

而且你应该考虑使用id而不是class，因为它只是一个元素。

于 2013-08-13T01:13:37.817 回答