javascript - 为什么我的setInterval函数第二次不起作用？ (JavaScript)

我做了一个div，我想使其每1秒钟朝一个特定方向动画。在我提供的代码中，有一个名为resetPosition()的函数，不用担心，它是从我在头部链接的其他js文件中获得的（完美运行）。我只想知道为什么setInterval()无法正常工作？
这是我的代码：-

<!DOCTYPE html>
<html>
    <head>
        <title>Animtion</title>
        <link rel="icon" href="http://3.bp.blogspot.com/-xxHZQduhqlw/T-cCSTAyLQI/AAAAAAAAAMw/o48rpWUeg2E/s1600/html-logo.jpg" type="image/jpg">
        <script src="easyJs.js"></script>
        <style type="text/css">
            div{height:100px; width:100px; background:cyan;}
        </style>
    </head>


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


    <script type="text/javascript">
        setInterval(function(){var x = new element('demo');
            x.resetPosition('absolute', '100px', '10px');}, 1000);
    </script>
</html>

这是easyJs：-

function element(elementId){
    this.myElement = document.getElementById(elementId);

    this.resetColor = changeColor;
    this.resetSize = changeSize;
    this.resetBackground = changeBackground;
    this.resetPosition = changePosition;
    this.resetBorder = changeBorder;
    this.resetFontFamily = changeFont;
    this.resetFontSize = changeFontSize;
    this.resetFontStyle = changeFontStyle;
    this.resetZindex = changeZindex;
    this.resetClass = changeClass;
    this.resetTitle = changeTitle;
    this.resetMarginTop = changeMarginTop;
    this.resetMarginLeft = changeMarginLeft;
    this.resetSource = changeSource;
    this.resetInnerHTML = changeInnerHTML;
    this.resetHref = changeHref;
    this.resetTextDecoration = changeTextDecoration;
    this.resetFontWeight = changeFontWeight;
    this.resetCursor = changeCursor;
    this.resetPadding = changePadding;
    this.getValue = getTheValue;
    this.getName = getTheName;
    this.getHeight = getTheHeight;
}

function changeColor(color){
    this.myElement.style.color = color;
}
function changeSize(height, width){
    this.myElement.style.height = height;
    this.myElement.style.width = width;
}
function changeBackground(color){
    this.myElement.style.background = color;
}
function changePosition(pos, x, y){
    this.myElement.style.position = pos;
    this.myElement.style.left = x;
    this.myElement.style.top = y;
}
function changeBorder(border){
    this.myElement.style.border = border;
}
function changeFont(fontName){
    this.myElement.style.fontFamily = fontName;
}
function changeFontSize(size){
    this.myElement.style.fontSize = size;
}
function changeZindex(indexNo){
    this.myElement.style.zIndex = indexNo;
}
function changeClass(newClass){
    this.myElement.className = newClass;
}
function changeTitle(newTitle){
    this.myElement.title = newTitle;
}
function changeMarginTop(top){
    this.myElement.style.marginTop = top;
}
function changeMarginLeft(left){
    this.myElement.style.marginLeft = left;
}
function changeSource(newSource){
    this.myElement.src = newSource;
}
function changeHref(newHref){
    this.myElement.href = newHref;
}
function changeInnerHTML(newHTML){
    this.myElement.innerHTML = newHTML;
}
function changeTextDecoration(decoration){
    this.myElement.style.textDecoration = decoration;
}
function changeFontWeight(weight){
    this.myElement.style.fontWeight = weight;
}
function changeFontStyle(style){
    this.myElement.style.fontStyle = style;
}
function changeCursor(cursor){
    this.myElement.style.cursor = cursor;
}
function changePadding(padding){
    this.myElement.style.padding = padding;
}
function getTheValue(){
    var theValue = this.myElement.value;
    return theValue;
}
function getTheName(){
    var theName = this.myElement.name;
    return theName;
}
function getTheHeight(){
    var theHeight = this.myElement.offsetHeight;
    return theHeight;
}

最佳答案

这可以帮助您了解内容和方式。（向下滚动到代码底部）：

Fiddle

// Create a new EasyJS object
var el = new element('demo');
// x and y position of element
var x = 0, y = 0;

// Interval routine
setInterval(function(){
    x = x + 1;  // Increment x by 1
    y = y + 1;  // Increment y by 1
    // Move element to position xy
    el.resetPosition('absolute', x + 'px', y + 'px');
    // Add text inside element showing position.
    el.resetInnerHTML(x + 'x' + y);

// Run five times every second
}, 1000 / 5);

原始代码说明：

setInterval(function() {
    // Here you re-declare the "x" object for each iteration.
    var x = new element('demo');
    // Here you move the div with id "demo" to position 100x10
    x.resetPosition('absolute', '100px', '10px');

// Once every second
}, 1000);

HTML div元素演示最初没有定位样式（CSS）。这样，它会根据浏览器的默认设置呈现在默认位置。

在第一次迭代中，将样式选项position更改为绝对。这意味着您可以将其移动到任何地方。其次，将其移动到偏移100x10。

在第二次以及之后的每次迭代中，该元素的position都设置为绝对值，并且其大小为100x10。然后，您说应该将其移至100x10 –保持原样。

如果您不更改x或y位置（左/上），则它将保持为100x10，更不用说运行循环了多少次了。每秒运行100次，一年后仍将是100x10 ;-)