JavaScript Windows 8 应用程序 setInterval() 问题

Question

基本上，我在 MS Visual Studio 2012 中有此代码，用于 Windows 8 JavaScript+jQuery 应用程序。

<script>

    window.setInterval(function () {

        var currentx = $(".ball").css("left");
        var currenty = $(".ball").css("top");


        $(".ball").css("top", currentx + 1);
        $(".ball").css("left", currenty + 1);

        //debug
        var time=1;
        $("p.test").text("Has been called " +time);
        var time=time+1;

    }, 100);

</script>

是的，我使用的是 jQuery 2.0

现在我在这里查看了 API http://www.w3schools.com/js/js_timing.asp 在这里http://api.jquery.com/css/

我的代码可以编译，但它只是没有更新球的位置。看来它只被调用一次。如果它有帮助，球是一个DIV元素。也许windows 8 Apps不完全支持DOM操作，或者只是Window全局变量，我真的不知道。

我需要什么代码来实现我的目标，即按设定的时间间隔更新类球的这个元素的顶部和左侧 CSS 规则？

Answer 1

.css("left") 和 .css("top") 返回一个字符串（例如 0px）而不是数字，因此您需要使用 parseInt 解析它，否则 currentx + 1 会导致例如0px1

而且看起来它只被调用一次，因为在setIntervalcallback 中定义了time 并设置为1，你需要在setInterval 的回调之外定义和初始化它。

您也可以考虑使用.position().left，而不是.css("left")。

(function() {
    var time=1;
    window.setInterval(function () {

            var currentx = parseInt($(".ball").css("left"),10); 
            var currenty = parseInt($(".ball").css("top"),10);


            $(".ball").css("top", currentx + 1);
            $(".ball").css("left", currenty + 1);

            //debug

            $("p.test").text("Has been called " +time);
            time=time+1;

    }, 100);
})();