javascript

Question

我已经将 Square 创建为一个对象并为其指定了大小和旋转的原型，当我创建新的 square1 和 square2 并对它们调用 rotate 时，只有最后创建的 div 旋转是一个正方形，两者需要旋转，“我认为这可能与 className square 有关，但需要帮助修复它。两个 Square 都需要旋转。

谢谢

// global variables //

var angle = 0; //initialize angle

// Square Object //

var Square = function() {
    square = document.createElement('div');
    square.className = 'square';
    document.body.appendChild(square); //div created div name class square
}

// prototype size of Square

Square.prototype.size = function(width,height,margin) {
    square.style.width = width + 'px';
    square.style.height = height + 'px';
    square.style.margin = margin + 'px';
} 


//prototype rotate of Square 

Square.prototype.rotate = function rotA() {
    angle = (angle + 1)%360;
    square.style.transform = "rotate(" + angle + "deg)"
    window.requestAnimationFrame(rotA);
}


// create new square -------------
var square1 = new Square();

square1.size(250,250,250);

var square2 = new Square();

square2.size(500,500,125)
square1.rotate();
square2.rotate();

请在此处查看 fiddle：https://jsfiddle.net/gustav1105/c41fLbh0/

Answer 1

检查这个 fiddle，虽然不是您想要的 object-oriented 但如果您没有找到任何其他解决方案，您可以使用它

// global variables //

var angle = 0; //initialize angle

// Square Object //

var Square = function() {
    var square = document.createElement('div');
    square.className = 'square';
    square.style.backgroundColor = "#000";
    document.body.appendChild(square); //div created div name class square
    return square;
}

// prototype size of Square

Square.size = function(square, width,height,margin) {
    square.style.width = width + 'px';
    square.style.height = height + 'px';
    square.style.margin = margin + 'px';
} 


//prototype rotate of Square 

Square.rotate = function rotA(square) {
    angle = (angle + 1)%360;
    square.style.transform = "rotate(" + angle + "deg)"
    window.requestAnimationFrame(function(){ rotA(square) });
}


// create new square -------------
var square1 = new Square();
console.log(square1);
Square.size(square1,25,25,25);

var square2 = new Square();

Square.size(square2,25,25,25)
Square.rotate(square1);
Square.rotate(square2);

Answer 2

正如@gurvinder372 所建议的那样，没有为每个 Square 对象在本地定义 square，代码只是 "forgets" 第一个实例。

请使用 this 关键字来引用原型扩展中的实例变量。

这是一个JSFiddle

Answer 3

您需要在函数中使用 this 关键字。并且在从 window.requestAnimationFrame

调用时需要 bind rotate 函数

// Square Object //

var Square = function() {
    this.angle = 0;
 this.square = document.createElement('div');
 this.square.className = 'square';
 document.body.appendChild(this.square); //div created div name class square
}

// prototype size of Square

Square.prototype.size = function(width,height,margin) {
 this.square.style.width = width + 'px';
 this.square.style.height = height + 'px';
 this.square.style.margin = margin + 'px';
} 


//prototype rotate of Square 

Square.prototype.rotate = function() {
 this.angle = (this.angle + 1)%360;
 this.square.style.transform = "rotate(" + this.angle + "deg)"
 window.requestAnimationFrame(this.rotate.bind(this));
}


// create new square -------------
var square1 = new Square();
square1.size(250,250,250);

var square2 = new Square();
square2.size(500,500,125);

square1.rotate();
square2.rotate();

.square {
  position: absolute;
  left:0;
  top:0;
  border: 1px solid black;

}

javascript - 为什么两个 div 都不旋转？

javascript - why are both divs not rotating?

html

oop

object

rotation